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: enter image description here

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:

enter image description here

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! :)

jsfiddle.net/Q43fN/25/show See the updated answer - using a:after and inline-block; — JohanVdR
– JohanVdR, Commented Apr 20, 2014 at 13:19

Martijn · Accepted Answer · 2014-04-20 12:52:51Z

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/

answered Apr 20, 2014 at 12:52

Martijn

16.2k4 gold badges39 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jkirchne · Accepted Answer · 2014-04-20 12:38:06Z

0

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

edited Apr 20, 2014 at 12:38

answered Apr 20, 2014 at 12:22

jkirchne

1213 bronze badges

Comments

JohanVdR · Accepted Answer · 2014-04-20 13:17:45Z

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

Vinz243 · Accepted Answer · 2014-04-20 13:20:36Z

0

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

answered Apr 20, 2014 at 13:20

Vinz243

9,96611 gold badges46 silver badges97 bronze badges

Collectives™ on Stack Overflow

Change image color on hover

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related