小编Nic*_*lti的帖子

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

可以,然后呢。我有个问题。

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

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

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

这是一些代码:

	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); …
Run Code Online (Sandbox Code Playgroud)

html css animation image css-selectors

3
推荐指数
1
解决办法
6970
查看次数

标签 统计

animation ×1

css ×1

css-selectors ×1

html ×1

image ×1