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

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/

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

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

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

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

Collectives™ on Stack Overflow

Change image color on hover

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related