Geek Answers Handbook

Css hover over image - upload div

I would like to make a CSS effect for the image to freeze.

I want to show a div containing content such as text when I hover over an image.

So, I would like to do something with this code:

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

I tried to hide the “hanging” div in the css display and on hover, I tried to configure the lock display, but it doesn’t work ... :(

EDIT: I want the text in the image. When I find the image, it should get some opacity, but the text should not get this opacity!

Is there any way to do this?

+7
source share
6 answers

http://jsfiddle.net/ZSZQK/

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

Just make it simple, no need to change the markup.

Update

If you want to change the opacity of the image on 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 more requirements to your original question, now this requires changing the original html markup.

I assume that you are using html5 , and if so, you should use tags assigned to your content context:

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

and 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

+9
source

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:

  • Moved div text inside #image div.
  • Changed id="hover" to class="hover"
  • Added display:block when #image and display:none if not.
  • Some positioning rules, this is just a quick example, let me know if it works.
+3
source

There are so many ways to do this, but if you want to use only the CSS approach, you will need to rebuild your html something like this:

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

And then in your CSS, by default they hide the message:

 #hover {display:none;}

Then show the message:

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

Without JavaScript, you can do like this:

#hover div above the image and set the opacity:0 ;

2. Add it to css:

  #hover:hover { opacity:1 }

This should solve your problem.

0
source

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>
0
source

Hello, if I understood correctly, you want something like this:

 <div id="wrapper"> <div id="img-wrapper"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA"> </div> <div id="text-wrapper"> <p>Hello world!</p> </div> </div>

CSS

 #wrapper{ position:relative; border:1px solid black; width:102px; height:102px; } #text-wrapper{ position:absolute; height:0px; overflow:hidden; font-size:14px; font-family:Arial,Tahoma; font-weight:bold; transition: height 1s; -moz-transition: height 1s; /* Firefox 4 */ -webkit-transition: height 1s; /* Safari and Chrome */ -o-transition: height 1s; /* Opera */ } #img-wrapper:hover + #text-wrapper{ height:32px; width:102px; }

The key to achieving this is this css line:

 #img-wrapper:hover + #text-wrapper{

What he actually does is "When I find the img-wrapper div, I do some things in the text-wrapper div"

Check out the demo here: http://jsfiddle.net/A9pNg/1/

0
source

More articles:


All Articles