CSS Color Overlay

Question

CSS Color Overlay

0

К сожалению, я не нашел ответа на этот общий вопрос, который соответствует моим потребностям, поэтому я представляю это вам.

Проблема:

У меня есть изображение, которое должно быть "наложено" с цветом. Ниже у меня есть код.

HTML:

<a href=""><img class="portfolio-item" src="https://m1.behance.net/profiles12/3455485/projects/14323837/1cdda4b7d6bad96ceee53e6bad98b8e4.png"></a>

CSS:

.portfolio-item {
    top: 100px;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 0px;
    border-radius:25px;
}

.hover {
    background-color: rgba(48, 48, 48, 0.9);
    overflow: hidden;
    z-index: 1;
}

Jquery:

$(document).ready(function(){
$(".portfolio-item").hover(function(){
                        $(".portfolio-item").addClass("hover");
                    }, function(){
                        $(".portfolio-item").removeClass("hover");
                    });
});

Дайте мне знать, если вы можете помочь.

Liam Shalon 04 март 2014, в 07:01

Источник

0

почему вы пишете переполнение: скрыто для класса hover
Sudharsan S 04 март 2014, в 05:08

Теги:

javascript

jquery

html

css

4 ответа

Ещё вопросы

почему вы пишете переполнение: скрыто для класса hover

SajithNair · Answer 1 · 2014-03-04T04-21-00.000Z

Проверьте эту скрипку http://jsfiddle.net/sajith/sha5E/

HTML

<a class="bg" href=""><img class="portfolio-item" src="https://m1.behance.net/profiles12/3455485/projects/14323837/1cdda4b7d6bad96ceee53e6bad98b8e4.png"></a>

Javascript

$(document).ready(function(){
    $(".portfolio-item").hover(function(){
        $(".portfolio-item").addClass("hover");
    }, function(){
        $(".portfolio-item").removeClass("hover");
    });
});

CSS

.portfolio-item, .bg {
    height: 200px;
    width: 200px;
    left: 0px;
    border-radius:25px;
    position:absolute;
}

.hover {
    overflow: hidden;
    z-index: 1;
    opacity:0.1;
}
.bg {
    background-color: rgba(48, 48, 48, 0.9);
    top: 100px;
    display:inline-block;
}

Richard Shi · Answer 2 · 2014-03-04T04-20-00.000Z

jQuery не требуется. Вы можете использовать ::after псевдоэлемента.

HTML:

<div class="portfolio-item">
    <img  src="https://m1.behance.net/profiles12/3455485/projects/14323837/1cdda4b7d6bad96ceee53e6bad98b8e4.png" />
</div>

CSS:

.portfolio-item { //container
    position: absolute;
    top: 100px;
    left: 0px;
}
.portfolio-item img { //image styling
    height: 200px;
    width: 200px;
    border-radius:25px;
}
.portfolio-item:after { //contains the 'overlay'
    position:absolute;
    display: block;
    content: "";
    top: 0px;
    left: 0px;
    height: 200px;
    width: 200px;
    background: rgba(48, 48, 48, 0.9);
    z-index: 101;
    opacity: 0;
    border-radius:25px;
}
.portfolio-item:hover:after {
    opacity: 1;
}

Сценарий: http://jsfiddle.net/Shiazure/wJheZ/

Bradley · Answer 3 · 2014-03-04T03-02-00.000Z

.container {
  width : 200px;
  height: 200px;
  position: relative;
}

.overlay {
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .4;  
}

попробуйте обернуть его так и добавьте div с наложением класса внутри контейнера

Pratik C Joshi · Answer 4 · 2014-03-04T02-26-00.000Z

Вам не нужно использовать jQuery

.portfolio-item {
    top: 100px;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 0px;
    border-radius:25px;
}

.portfolio-item:hover {
    background-color:cyan;

    z-index: 1;
}

Я использовал его, и цвет фона также меняется в браузере, я знаю, что ваше изображение png не прозрачно, используйте другое изображение Transparant, и оно будет работать.