Image hover to reveal links

问题

so I have a div which will include an image http://www.reversl.net/hovers/ and I'd like for the image to reveal two links when hovered like in layout shown here http://www.reversl.net/demo/ Is it possible to achieve this using only css?

回答1:

Another way you could do it with display:none/block

div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container div { width: 100%; position: absolute; top: 0; display: none; }
div.container img:hover + div { display: block; }
div.container div:hover { display: block; }

<div class="container">
<img src="an_img.jpg">
<div> <a href="a link">A link should be here</a> </div>
</div>

回答2:

you can create the div with links and in css:

div.myimage div.links { display:none;} 
div.myimage:hover div.links { display:block;}

sample html:

 <div class="myimage">
   <div class="links"> we are the links</div>
   <img src="animage.png" />
</div>

obviously you have to setup yourself div positioning

回答3:

You could always use 'opacity'.

Your markup would be something like this:

<div class="wrapper">
  <img src="example.png" alt="example" />
  <ul class="links">
     <li><a href="">Example Link</a></li>
     <li><a href="">Example Link</a></li>
   </ul>
   </div>

Then in CSS:

 .wrapper {
     position: relative; /*so the absolute positioning works */
  }

 .links {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;  /*hidden by default */
     width: 100%;
     height: 25px; /*making this up */
  }

  .wrapper:hover .links, .wrapper:focus .links {
     opacity: 1;  /*visible on hover */
   }

A couple caveats to this technique:

You will need to use an opacity filter for IE8 and below, as they don't understand the opacity CSS property
I would NOT recommend this technique for navigation, as you seem to be intending. Users on touch devices (smartphones and tablets) don't really have the "hover" state to rely on.

If you want some bonus points, though, for users with modern browsers, add this:

 .links {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }

And the links will 'fade' in - all with CSS.

回答4:

if you want to hover over the image only:

div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container img:hover { z-index: -1; }
div.container div { width: 100%; position: absolute; top: 0; }
div.container div:hover { z-index: 1; }

(the last one is needed to eliminate flicker when hovering over the links)

<div class="container">
<div> <a href="">A link should be here</a> </div>
<img src="an_img.jpg">
</div>

来源：https://stackoverflow.com/questions/9943818/image-hover-to-reveal-links

标签

css

hover

mousehover