CSS颜色叠加

Question

Unfortunately I haven't found an answer to this generic question that fits my needs, so I present this to you.

The problem:

I have an image that needs to be "overlayed" with a color. Below I have the code.

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");
                    });
});

Let me know if you can help.

Answer 1

You dont need to use 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;
}

I used it ,and background color is also changing in browser ,I know your png image is not transparant ,use other Transparant image,and it will work.

Answer 2

Check this fiddle 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;
}

Answer 3

jQuery isn't needed. You can use the ::after pseudoelement.

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;
}

Fiddle: http://jsfiddle.net/Shiazure/wJheZ/

Answer 4

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

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

try wrapping it like this and adding a div with a class overlay inside the container