Css Hover On Image - Load A Div

March 26, 2023 Post a Comment

I would like to do a CSS effect on hovering an image. I'd like to show a div containing content like text when I hover on an image. So I'd like to do something with this code: <

Solution 1:

http://jsfiddle.net/ZSZQK/

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

Just keep it simple, no need to change your markup.

Update

If you want to change opacity of image on mouse hover, then http://jsfiddle.net/ZSZQK/4/

#hover {
    display: none;
    position: relative;
    top: -25px;
}

#image:hover {
    opacity: .7;
}

#image:hover + #hover {
    display: block;
}

Update 2

Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.

I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

and the css

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    right: 0;
    background-color: rgba(0,0,0,.15);
}

figure:hover img {
    opacity: .7;
}

figure:hover figcaption {
    display: block;
}

jsFiddle

Solution 2:

Try:

<div id="image">
    <img src="image.png"/>
    <div class="hover">Test message</div>
</div>

CSS:

#image {
    position:relative;
}

#image .hover {
    display:none;
    position:absolute;
    bottom:0;
}

#image:hover .hover {
    display:block;
}

Basically what I did was:

Moved text div inside #image div.
Changed id="hover" to class="hover"
Added display:block when #image is hovered and display:none if not.
Some positioning rules, it's just a fast example, let me know if it works.

Solution 3:

There are so many ways to do this, but if you want a CSS only approach, you would need to restructure your html to something like:

<div id="image">
    <img src="image.png"/>
    <div id="hover">Test message</div>
</div>

And then in your CSS hide the message by default:

#hover {display:none;}

Then show the message:

#image:hover #hover {display:block;}

Solution 4:

Without JavaScript you can do like this :

1.Make the #hover div be on top of the image and set the opacity:0;

2.Than add this to the css :

    #hover:hover {
     opacity:1
     }

This should resolve your problem.

Solution 5:

here is the solution i found on google

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Untitled Document</title>
                </head>
                <style type="text/css">
                #mybox {
                width:80px;
                height:90px;
                float:left;
                background-color:#0F9;
                padding:10px;
                }
                .Imgdiv {
                width:80px;
                height:20px;
                margin:0px 0px 10px 0px; padding:0px;
                cursor:pointer;
                background-color:#39C;
                }
                #mybox .hiddenDiv {
                left:0px;
                display:none;
                z-index:100;
                width:80px;
                height:50px;
                margin:0px;
                background-color:#336;
                float:left;
                }
                #mybox:hover .hiddenDiv {
                display:block; top:0px; left:8px;
                }
                </style>
                <body>
                <div id="mybox">
                <div class="Imgdiv"></div>
                <div class="hiddenDiv"></div>
                </div>


                </body>
                </html>

Html5 Programming Language