Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial

troy beckett
12,035 PointsCHANGING IMAGE WHEN HOVERING OVER?
I have an image inside a div on a web page. What I want to do is this. When I hover over the image I want the image and div to turn black and show a name for the person in the image. Then when I take the cursor off the image is back on.
2 Answers

erdragerdragsson
Courses Plus Student 5,887 PointsGo to this site, it shows some ways to add hover effect on images
http://www.corelangs.com/css/box/hover.html
Kind regards // Erdrag

Baruch Velez
275 PointsHere ya go.
<div id="box">
<div id="info">
Info
</div>
<div id="image">
Image
</div>
</div>
#box{
width:15em;
height:15em;
position:relative;
}
#info{
display:none;
position:absolute;
height:100%;
width:100%;
background:black;
color:white;
z-index:1;
}
#image{
background:red;
height:100%;
width:100%;
position:absolute;
z-index:0;
}
#box:hover #info{
display:block;
}
There might be some stuff you can clear out and what not, but this is the basic idea.
Hope this helps.
EDIT: Added fiddle. http://jsfiddle.net/dLsyxLas/1/
Liz Laffitte
23,691 PointsLiz Laffitte
23,691 PointsHere's another resource for you if you're interested in hover effects: http://ianlunn.github.io/Hover/