如何在使用 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>

Answer 2

首先，您的文本跨度缺少 left 位置设置，我添加了 (0)。除此之外，我更改了悬停状态的选择器，以便图像和文本设置在它们的 parent 元素 .pic 悬停时都会发生变化：

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

.imgtext {
  color: white;
  width: 155px;
  height: 135px;
  padding: 50px 15px 0 15px;
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0;
  -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>

Answer 3

https://codepen.io/DannaB67/pen/JJJQqX

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

<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>