html - 如何在使用 css 在图像上显示文本(悬停)时模糊图像

Question

好的，就这样。我有一个问题。

我想要一张悬停时模糊的图片，同时让文字出现在上面。

我找到了一种简单的方法来模糊图像并使文本出现，但不能同时出现；事实上，将这两个代码合并在一起可以使图片看起来一点也不模糊。我认为这是因为文本实际上覆盖了图像，而浏览器没有收到图像悬停的消息。

这里是 the image with text over it这是the image with blur on hover我该如何解决这个问题？我正在努力，我想我已经找到了另一种方法，但它有点麻烦。

这是一些代码:

	h1,p {
		margin: 0;
		padding: 0;
	}
	.imgtext {		
		color: white;
		background: rgba(0,0,0,0.89);
		width: 155px;
		height: 135px;
		padding: 50px 15px 0 15px;
		opacity: 0;
		position: absolute;
		bottom: 0px;
		-webkit-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
	}
	.pic {
   	position: relative;
		overflow: hidden;
		width: 185px;
		height: 185px;
		margin: 50px auto;
	}
	.pic img:hover{
		-webkit-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
		-webkit-filter: blur(1px);
		-moz-filter: blur(1px);
		-ms-filter: blur(1px);
		-o-filter: blur(1px);
		filter: blur(1px);
		transform: scale(1.03);
	}
	.imgtext:hover {
		-webkit-opacity: 100;
		opacity: 100;
	}

	<div class="pic">
		<img src="http://nicolacornolti.com/photos/film/img/1.png">
		<span class="imgtext">
			<h1>THIS IS A TITLE</h1>
			<p>and this is a description</p>
		</span>

Answer 1

在 .pic 容器元素上使用伪类 :hover，而不是在每个单独的子元素上。

例如:

.pic .imgtext:hover 到 .pic:hover .imgtext

和

.pic img:hover 到 .pic:hover img

h1,
p {
  margin: 0;
  padding: 0;
}

.imgtext {
  color: white;
  background: rgba(0, 0, 0, 0.89);
  width: 155px;
  height: 135px;
  padding: 50px 15px 0 15px;
  opacity: 0;
  position: absolute;
  bottom: 0px;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.pic {
  position: relative;
  overflow: hidden;
  width: 185px;
  height: 185px;
  margin: 50px auto;
}

.pic:hover img {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  transform: scale(1.03);
}

.pic:hover .imgtext {
  -webkit-opacity: 1;
  opacity: 1;
}

<div class="pic">
  <img src="http://nicolacornolti.com/photos/film/img/1.png">
  <span class="imgtext">
    <h1>THIS IS A TITLE</h1>
    <p>and this is a description</p>
  </span>
</div>