CODEWITHSUNDEEP
htmlcss
GV1
GV1

Reputation: 475

CSS Overlay IMG Hover

I'm trying to overlay transparent PNG over an image when the image is hovered. I want it to be semantic, i.e. I don't want to add unnecessary elements and images to the HTML for the purpose of styling or usability.

Here is my element with the image

<li class="cover-image"><img src="image.png" width="700" height="250"></li>

And here is my CSS that I've tried

#covers li ul .cover-image
{
margin: 10px 0;
display: block;
width: 700px;
height: 250px;
}

#covers li ul .cover-image img:hover
{
background: url('../images/cover-overlay.png') top left no-repeat;
}

Is there any way to do this without adding an additional image to the HTML?

Upvotes: 2

Views: 3810

Answers (4)

Cyclonecode
Cyclonecode

Reputation: 30001

You could create one sprite from your two separate images (one above the other) and do something like this:

html:

<li class="cover-image"></li>

css:

#covers li ul .cover-image {
   background-image: url('sprite.png') 0 0 no-repeat;
   width: 700px;
   height: 250px;
}

#covers li ul .cover-image:hover {
   background-position:0px -250px;
}

Upvotes: 2

Gavin Anderegg
Gavin Anderegg

Reputation: 6391

The problem is that the img is being displayed on top of the li. Because of this, I don't think there's any way to have the li display something "on top" of the img. In this case, I would use JavaScript to add the effect you're looking for.

I've created a JSFiddle you can look at for reference, and which I'll explain below:

First I set up some markup similar to what you describe above:

<ul>
    <li class="cover-image"><img src="http://www.gravatar.com/avatar/3114d84a5c5144b2a531c610c913bdb9?s=128&d=identicon&r=PG" width="700" height="250"></li>
</ul>

I then used similar CSS, with the addition of a new span.over declairation:

ul li.cover-image span.over
{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 700px;
    height: 250px;
    z-index: 32;
    background-image: url('http://shipsstarthere.ca/img/trans-bg.png');
    pointer-events: none;
}

The span here contains a semi-transparent png image which will be used in an overlay. By default, the span isn't displayed, but we can use JavaScript to add it only when the user hovers over the image.

Here's the JavaScript (using jQuery), I used:

$(document).ready(function() {
    $('ul li.cover-image img').hover(function() {
        $('ul li.cover-image').append('<span class="over"></span>');
    }, function() {
        $('ul li.cover-image span').remove();
    });
});

Again, take a look at the JSFiddle example. It shows how this works and keeps the default markup slightly less cluttered.

Upvotes: 3

Vigrond
Vigrond

Reputation: 8198

I think the simplest way to do this would be to add a div overlay element. I know this is not what you wanted to do, but there is no 'overlay' css feature for images.

  <li class="cover-image"><div class='overlay'></div><img src="image.png" width="700" height="250"></li>

#covers li ul .cover-image
{
    position:relative;  
    margin: 10px 0;
    display: block;
    width: 700px;
    height: 250px;
}

.overlay{
    width:100%; 
    height:100%; 
    position:absolute;
    z-index:50;
}  

#covers li ul .cover-image:hover .overlay //notice selector edit
{
    background: #fff url('../images/cover-overlay.png') top left no-repeat;
}

Upvotes: 0

ptriek
ptriek

Reputation: 9276

I'd add a background color to the parent div, and change opacity on hover:

http://jsfiddle.net/7VpKA/

<div><img src="http://placehold.it/350x150"></div>

div {
    background:#000;
    width:350px;
    height:150px;
}

div img:hover {
    opacity:0.8;
}

Upvotes: 0

Related Questions