CODEWITHSUNDEEP
htmlcssimage
peyroux
peyroux

Reputation: 35

Display image in the center of screen when hovering on a link

I'm trying to display an image in the center of the screen when you hover on a link. I've got an image to appear when hovering on a link, but now I can't get it to center.

Here's my html:

<div class="hover_img">
 <a href="#">A picture of my face<span><img src="/image.png"/></span></a>

And CSS:

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99;}
.hover_img a:hover span { display:block;}

Upvotes: 2

Views: 11291

Answers (2)

drosam
drosam

Reputation: 2896

I am not sure if this is what you want, but here you have a working example https://jsfiddle.net/vqxb20vg/2/

HTML

<div class="hover_img">
 <a href="#">
   A picture of my face<span><img src="/image.png"/></span>
 </a>
</div>

CSS

.hover_img { 
  position:relative;  
}
.hover_img a span { 
  position:absolute; 
  display:none; 
  z-index:99;
  left:50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.hover_img a:hover span { 
  display:block;
}

Upvotes: 2

Renuka CE
Renuka CE

Reputation: 686

Can you check it now? IS this which you are looking at.

.hover_img a span { position:absolute; display:none; z-index:99;}

.hover_img a:hover span{
    display:block;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
<div class="hover_img">
 <a href="#">A picture of my face<span><img src="http://www.bhea.com/images/logo1.png"/></span></a>
</div>

Upvotes: 1

Related Questions