html - 悬停在链接上时在屏幕中央显示图像

Question

当您将鼠标悬停在链接上时，我试图在屏幕中央显示图像。将鼠标悬停在链接上时，我会显示一张图片，但现在我无法将其居中。

这是我的 html:

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

和 CSS:

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

Answer 1

我不确定这是否是您想要的，但这里有一个有效的示例 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;
}