如何使用CSS在图像上显示文本时(悬停)使图像模糊 [英] How to blur an image while showing text over it (hover) with 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 hover How 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在图像上显示文本时(悬停)使图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！