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

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

例如：

.pic .imgtext:hover至.pic:hover .imgtext

和

.pic img:hover至.pic:hover img

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，您的文字范围缺少left位置设置，我添加了（0）。除此之外，我更改了悬停状态的选择器，以便在父元素.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>

如何在使用css显示文本（悬停）时模糊图像

3 个答案: