Question

是否可以在不休息数小时的情况下不模糊模糊图像的边界？可以解决这个问题。可能不会对斜角边缘产生任何影响？

对于任何示例或建议，我将不胜感激。

thx yummi

body {
    background-color: dimgrey;
    margin: 50px;
}
    .gallery {
    position: absolute;
    transform: scale(1.22); 
    overflow:hidden;
}
    /*................ bevels ................*/

    img#bevel {
    border-radius: 20px;
}
    /*......... crossfade on buttons .........*/

    #hover img{
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    position:absolute;
}
    .nohover{
    filter: blur(4px);
}
    a:hover .hover{
    filter: blur(4px);
}
    a:hover .nohover{
    filter: blur(0);
}
    /*............. pop on hover .............*/
    
    #pop img {transition: .5s ease}
    #pop img:hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    transition: 0.2s ease;
}

<div class="gallery" id="pop">
<a id="hover" href="topup.htm"><img src="https://www.wizzfree.com/pix/vid0.jpg" width="100" id="bevel" class="nohover"><class="hover"></a>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>How to NOT blur border edges?</p>

Answer 1

尝试一下，代替img:hover使用.gallery:hover

.gallery:hover{
  -webkit-transform: scale(1.35);
  -ms-transform: scale(1.35);
  transform: scale(1.35);
  transition: 0.2s ease;
}

body {
  background-color: dimgrey;
  margin: 50px;
  position:relative;
}
.gallery {
  position: absolute;
  top:30px;
  right:10px;
  overflow:hidden;
  transform: scale(1.22); 
  border-radius: 20px;
  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
}

.nohover{
  filter: blur(4px);
}
a:hover .hover{
  filter: blur(4px);
}
a:hover .nohover{
  filter: blur(0);
}

.gallery:hover {
  -webkit-transform: scale(1.35);
  -ms-transform: scale(1.35);
  transform: scale(1.35);
  transition: 0.2s ease;
}

<div class="gallery" id="pop">
    <a id="hover" href="topup.htm">
        <img src="https://www.wizzfree.com/pix/vid0.jpg" width="200" id="bevel" class="nohover" />
    </a>
</div>
<br>
<br>
<br>
<br>
<p>How to NOT blur border edges?</p>

如何不模糊边框边缘？

1 个答案: