CODEWITHSUNDEEP
csshovermousehover
Jedda
Jedda

Reputation: 1017

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?

Upvotes: 4

Views: 1459

Answers (4)

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 1

panda-34
panda-34

Reputation: 4209

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>

Upvotes: 1

panda-34
panda-34

Reputation: 4209

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>

Upvotes: 0

kappa
kappa

Reputation: 1569

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

Upvotes: 4

Related Questions