在悬停时显示图像，以背景为中心 [英] Display image on hover, centered in the background

问题描述

我在Stackoverflow上查看了有关在悬停时显示图片的一些问题，但找不到我的问题的解决方案。

I went through a number of questions regarding displaying image on hover here on Stackoverflow, but couldn't find a solution for my problem.

现在我设法一旦我将鼠标悬停在该段落的背景中，就会显示该图像。 查看JSFiddle。

Right now I managed to display an image in the background of the paragraph once I hover on it. See on JSFiddle.

理想情况下，我想要什么要做到这一点：一旦我将鼠标悬停在一个段落内的Example1上，我想在背景中显示Image1，而不是在段落下面，而是在背景中居中，在所有元素下面。 如图所示。

Ideally what would I like to do achieve: once I hover over an Example1 inside of a paragraph I would like to display Image1 in the background, not below the paragraph, but centered in the background, below all of the elements. As pictured here.

悬停在Example2上理想情况下会显示Image2，而Example3会显示Image3。

Hovering on Example2 would ideally display Image2, and Example3 would display Image3.

HTML

<div id="imgbg">
<p>Portfolio:</p>    
<p>I worked with:<br />
Example1, Example2, Example3, Example4, Example5
</p>
</div>

CSS

#imgbg {
height: 100%;
width: 100%;
}

#imgbg:hover {
background-image: url('http://i.imgur.com/9bbjE1Mb.jpg');
}

有没有人有解决方案？非常感谢。

Does anyone have a solution? Many thanks.

推荐答案

我希望这可以帮到你。

#imgbg {
  position: relative;
  width: 100%;
  height: 265px;
}

#imgbg .Example:hover:after {
  display: block;
}

#imgbg .Example:after {
  content: '';
  display: none;
  width: 160px;
  height: 160px;
  background: url('http://i.imgur.com/9bbjE1Mb.jpg');
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -80px;
  margin-left: 145px;
  z-index: -1;
}

<div id="imgbg">
  <p>Portfolio:</p>    
  <p>I worked with:<br />
   <span class="Example">Example1</span>,
   <span class="Example">Example2</span>,
   <span class="Example">Example3</span>,
   <span class="Example">Example4</span>,
   <span class="Example">Example5</span>
  </p>
</div>

这篇关于在悬停时显示图像，以背景为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！