CSS悬停效果和叠加层
作者：徐恩爱2702937105 | 来源：互联网 | 2023-01-29 12:34
如何解决《CSS悬停效果和叠加层》经验，为你挑选了1个好方法。
我的照片顶部有透明覆盖物.如果我将鼠标悬停在它上面,我希望背景中的图像模糊,并且叠加层变得不透明.由于两个图层都在彼此之上,因此当我将鼠标悬停时,只有叠加层的不透明度会发生变化.如何在后台触发图像？
我的尝试:
Lorem ipsum...
.icon {
position: relative;
text-align: center;
float: left;
width: 23%;
height: 200px;
margin-left: 10px;
-webkit-transition: all 0.5s ease-in-out;
text-align: center;
text-decoration: none;
}
.icon .overlay {
position: absolute;
top: 0px;
bottom: 0px;
width: 290px;
height: 240px;
text-align: center;
opacity: 0;
display: block;
color: black;
}
.icon .overlay:hover {
opacity: 1;
}
.icon img:hover {
-webkit-filter: blur(2px);
}
Ori Drori..
11
设置元素的:hover行为.icon,并使用后代选择器更新子项(.overlay和img)样式:
当父母.icon盘旋时改变孩子的样式:
.icon:hover .overlay {
opacity: 1;
}
.icon:hover img {
-webkit-filter: blur(2px);
}
演示:
.icon {
position: relative;
text-align: center;
float: left;
width: 23%;
height: 200px;
margin-left: 10px;
text-align: center;
text-decoration: none;
transition: all 0.5s ease-in-out;
}
.icon .overlay {
position: absolute;
top: 0px;
bottom: 0px;
width: 290px;
height: 240px;
text-align: center;
opacity: 0;
display: block;
color: black;
transition: inherit;
}
.icon img {
transition: inherit;
}
.icon:hover .overlay {
opacity: 1;
}
.icon:hover img {
-webkit-filter: blur(2px);
}
Lorem ipsum...
1> Ori Drori..：
设置元素的:hover行为.icon,并使用后代选择器更新子项(.overlay和img)样式:
当父母.icon盘旋时改变孩子的样式:
.icon:hover .overlay {
opacity: 1;
}
.icon:hover img {
-webkit-filter: blur(2px);
}
演示:
.icon {
position: relative;
text-align: center;
float: left;
width: 23%;
height: 200px;
margin-left: 10px;
text-align: center;
text-decoration: none;
transition: all 0.5s ease-in-out;
}
.icon .overlay {
position: absolute;
top: 0px;
bottom: 0px;
width: 290px;
height: 240px;
text-align: center;
opacity: 0;
display: block;
color: black;
transition: inherit;
}
.icon img {
transition: inherit;
}
.icon:hover .overlay {
opacity: 1;
}
.icon:hover img {
-webkit-filter: blur(2px);
}
Lorem ipsum...
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 