Change image color on hover

Question

I have this image where I have used z-index to place a box and text over the image: Here's what it looks like:

And that's done using this code:

#wrap {
    position:relative; 
    width: 200px;  
    height: 145px;
    border: 1px solid grey
}



#text {
    z-index: 100;
    position: absolute;    
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
}

and the calling the function:

<div id="wrap">
    <img src="/wp-content/uploads/2014/03/brandslang.png"/>
    <div id="text">Brand</div>
</div>

This image etc will be used as a link so basically I want to give the user some sort of response when he or she hovers over the image and basically I want to have the box span over the whole image like this when the user hovers over it like this:

I looked at the a:hover but I'm not really sure how to implement it so it will only affect this image and not every single link I have on the page, and that was where I was hoping you guys could help me! :)

Answer 1

You can use some css3 options. This way you don't have to change your html at all. The fiddle of adeneo uses another element, you can mimic that behaviour with :before

#wrap:hover:before{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    content : " ";
}
#wrap:hover #text{
    background: none;
}

http://jsfiddle.net/TY8fc/1/

Answer 2

what he said but with correct hover level: http://jsfiddle.net/83N5X/1/

<div id="wrap">
    <img src="http://www.rhpreventie.nl/media/catalog/product/cache/1/image/1200x1200/9df78eab33525d08d6e5fb8d27136e95/b/r/brandslanghaspel-25-meter-19-mm.png" height="145"/>
    <div id="text">Brand</div>
    <div class="cover"></div>
</div>

.cover {
    height: 101px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    display:none;
}

Answer 3

Wrapped the image in the a tag. Setting the display property to inline-block will make the div take the dimensions of the image.

http://jsfiddle.net/Q43fN/25/show
http://jsfiddle.net/Q43fN/25/

 #wrap {
 position:relative;
 border:1px solid gray;
 display:inline-block;
}

#wrap a {
 position:relative;
 display:inline-block;
}

#wrap a:after {
    content:'';
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.7);
    left:0;
    visibility:hidden;
    z-index:1;
}

#wrap a:hover:after {
    visibility:visible;
}

#text {
    z-index:100;
    position:absolute;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:10px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.7)
}
#wrap a:hover #text {
   background-color: transparent;
}

Answer 4

Here is with an anim (javascript) http://jsfiddle.net/83N5X/2/

$("#wrap").hover(function(){
    $(".cover").animate({"top": "0px"});
}, function(){
    $(".cover").css({"top": "101px"});
});


.cover {
    position: absolute;
    top: 101px;
    left: 0;
    right: 0;    
    bottom: 44px;
    background: rgba(0,0,0,.7);
    display:none;

}

#wrap:hover .cover {
    display:block;    
}