我有一些图像块,当我悬停块时,他们的子图像应该模糊并使用小的过渡效果进行缩放。它在firefox中完美运行,但是在使用WebKit浏览器时,模糊图像的边缘会出现一个奇怪的阴影。
我在another question搜索并获得了一个解决方案,在那里他们已经使用-webkit-transform: translate3d(0, 0, 0);
来解决问题。但是当我应用translate3d(0, 0, 0)
时,阴影不会隐藏,并且像box-shadow inset
一样可见,直到鼠标离开。检查下面的小提琴和代码
.grid {
width: 40%;
float: left;
padding: 10px;
background-color: red;
figure {
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
-webkit-transition: all, 0.3s, linear;
-o-transition: all, 0.3s, linear;
transition: all, 0.3s, linear;
img {
max-width: 100%;
min-width: 100%;
-webkit-transition: all, 0.3s, linear;
-o-transition: all, 0.3s, linear;
transition: all, 0.3s, linear;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
-webkit-transform: scale(1) translate3d(0, 0, 0);
-moz-transform: scale(1) translate3d(0, 0, 0);
-ms-transform: scale(1) translate3d(0, 0, 0);
-o-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
}
&:hover {
figure {
opacity: 0.55;
filter: alpha(opacity=55);
img {
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
filter: blur(8px);
-webkit-transform: scale(1.06) translate3d(0, 0, 0);
-moz-transform: scale(1.06) translate3d(0, 0, 0);
-ms-transform: scale(1.06) translate3d(0, 0, 0);
-o-transform: scale(1.06) translate3d(0, 0, 0);
transform: scale(1.06) translate3d(0, 0, 0);
}
}
}
}
是否有任何解决方案可以在WebKit浏览器中删除阴影效果。帮助将不胜感激。
答案 0 :(得分:0)
不是网格是数字的背景,而是将其作为边框。
将数字的z-index设置为负数,使其位于网格下,并设置边距以使其与红色边框重叠,并且出血边缘不再可见。
即使你没有设置负边距,效果也要好得多,因为现在边框会变成白色而不是红色。
* {
padding: 0;
bottom: 0;
}
.grid {
width: 40%;
float: left;
padding: 0px;
border: solid 10px red;
}
.grid figure {
margin: -10px;
opacity: 1;
overflow: hidden;
transition: all, 0.3s, linear;
z-index: -1;
position: relative;
}
.grid figure img {
max-width: 100%;
min-width: 100%;
transition: all, 0.3s, linear;
-webkit-filter: blur(0);
filter: blur(0);
transform: scale(1) translate3d(0, 0, 0);
}
.grid:hover figure {
opacity: 0.55;
}
.grid:hover figure img {
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
filter: blur(8px);
transform: scale(1.06) translate3d(0, 0, 0);
}
<aside class="grid">
<figure>
<img src="http://lorempixel.com/500/500/sports/1/" alt="">
</figure>
</aside>
<aside class="grid">
<figure>
<img src="http://lorempixel.com/500/500/sports/2/" alt="">
</figure>
</aside>