Css Hover On Image - Load A Div

November 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><imgsrc="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:hoverimg {
    opacity: .7;
}

figure:hoverfigcaption {
    display: block;
}

jsFiddle

Solution 2:

Try:

<divid="image"><imgsrc="image.png"/><divclass="hover">Test message</div></div>

CSS:

Baca Juga

#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:

<divid="image"><imgsrc="image.png"/><divid="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 #hoverdiv 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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title></head><styletype="text/css">#mybox {
                width:80px;
                height:90px;
                float:left;
                background-color:#0F9;
                padding:10px;
                }
                .Imgdiv {
                width:80px;
                height:20px;
                margin:0px0px10px0px; 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><divid="mybox"><divclass="Imgdiv"></div><divclass="hiddenDiv"></div></div></body></html>

Html5 Guru