2

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;}
Sandesh
  • 1,190
  • 3
  • 23
  • 41
peyroux
  • 35
  • 1
  • 1
  • 4

2 Answers2

2

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;
}
drosam
  • 2,866
  • 3
  • 16
  • 18
  • Hi David, this is really close, thanks. But this centres the image from its left hand side, not from the centre of the image. Is there any way to have it dead-centre? – peyroux Feb 01 '16 at 14:02
  • Yes, you can use `transform: translateX(-50%);`. I have updated the answer – drosam Feb 01 '16 at 14:47
1

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>
Renuka CE
  • 666
  • 1
  • 6
  • 15