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

CSS

troy beckett
troy beckett
12,035 Points
Posted by troy beckett
troy beckett
12,035 Points

CHANGING 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.

Liz Laffitte
Liz Laffitte
23,691 Points

Here's another resource for you if you're interested in hover effects: http://ianlunn.github.io/Hover/

2 Answers

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Go 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
Baruch Velez
275 Points
Baruch Velez
Baruch Velez
275 Points

Here 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/