Как НЕ размыть края границ?

можно ли НЕ размывать края моего размытого изображения, когда не работает час? может переполнение исправить это. можно ли не применять эффект к скошенным краям?

Я был бы очень признателен за любые примеры или предложения.

спасибо вкусняшка

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>


blur css overflow
person Yummi    schedule 22.09.2020    source источник
comment
ваш html недействителен в <class="hover"></a>   -  person Rayees AC    schedule 22.09.2020
comment
спасибо, но вы можете исправить это сначала?   -  person Yummi    schedule 22.09.2020
comment
я обновил ответ :), если есть какие-либо изменения, я с радостью изменю и ответ :)   -  person Rayees AC    schedule 25.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

попробуйте это, вместо 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>

person Rayees AC    schedule 22.09.2020
comment
Вы хотите, как это? - person Rayees AC; 22.09.2020
comment
края границ в размытии, не должны быть размыты! - person Yummi; 22.09.2020
comment
это верхние края? - person Rayees AC; 22.09.2020
comment
попробуйте сейчас :) я обновил ответ. вы можете удалить переполнение: скрытый, чтобы сделать размытый край. - person Rayees AC; 22.09.2020
comment
луч, они все еще размыты? пример изображения здесь: url wizzfree.com/pix/screen.jpg - person Yummi; 22.09.2020
comment
Добро пожаловать в Stack Overflow. Если этот ответ правильный. Не забудьте принять ответ кстати, спасибо :) - person Rayees AC; 23.09.2020
comment
Вы хотите что-то вроде этого? - person Rayees AC; 25.09.2020