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

问题描述

好的.我有问题.

我想让图片在悬停时模糊不清，同时使文本显示在其上.

I wanted to have a picture that blurred on hover, and at the same time making text appear over it.

我找到了一种使图像模糊并使文本显示的简单方法，但不能同时使用；实际上，将这两个代码合并在一起会使它看起来完全不模糊.我认为这是由于以下事实:文本实际上覆盖了图像，并且浏览器没有收到图像被悬停的消息.

I've found a simple way to blur the image and to make the text appear, but not both at the same time; in fact merging the two codes together make it appear as the picture isn't blurring at all. I think this is due to the fact that the text actually covers the image and the browser doesn't receive the message that the image is being hovered.

这里是上面有文字的图片，这里是在悬停时模糊的图像我该如何解决这个问题?我很挣扎，我想我已经找到了另一种方法，但这有点麻烦.

Here is the image with text over it and here is the image with blur on hoverHow can I solve that issue? I'm struggling and i think I have found another way of doing it but it's a bit cumbersome.

这是一些代码:

	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>

推荐答案

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

Use the pseudo class :hover on the .pic container element, and not on each individual child element.

例如:

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

这篇关于如何使用CSS在图像上显示文本时(悬停)使图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！