Image while hovering a link [HTML+CSS] - html

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;
}