悬停链接时的图片[HTML + CSS]

Question

So I want to be able to have a link which when hovered, display an image.. So far, I only found tutorial to change an image while it's hovered..

How should I do that please ? BTW : I'm a total beginner in HTML..

Thanks !

Answer 1

Use adjacent sibling selector and the display property.

 img { display: none; } a:hover + img { display: block; } 

 <a href='http://example.com'>Hover Here</a> <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' width='200'> 

Answer 2

jQuery for life.

 $('.link').mouseover(function() { $('.dog').show(); }).mouseleave(function() { $('.dog').hide(); }) 

 @import url('https://fonts.googleapis.com/css?family=Raleway'); .link { height: 40px; width: 200px; border: 1px solid black; text-align: center; border-radius: 5px; margin-bottom: 10px; } a { text-decoration: none; color: black; font-size: 30px; font-family: Raleway; } .dog { background: url('https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg'); height: 150px; width: 150px; background-size: cover; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='link'> <a href='http://www.google.com'>Hover me</a> </div> <div class='dog'> </div> 

Answer 3

Indeed there is couple ways to achieve what you want. probably if you are a beginner in html and css, the best for you is to use zer00ne snippet. Hovever, if you want to dig deeper I also have the following solution for you:

You can test it here https://jsbin.com/barixeqigi/17/edit?html,css,js,output

HTML

<a href="#" title="super eye" alt="super eye">
  hover
</a>

CSS

a {
  position:relative;
}
a:after {
  content:'';
  display:block;
  width: 200px;
  height: 200px;
  opacity:0;
  background: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') no-repeat center;
  background-size: cover;
  border-radius:50%;
  position:absolute:
  right:0px;
  top:0px;
    -webkit-transition: all 3s;
    transition: all 3s;
}
a:hover:after {
  opacity: 100;
}