0

Overview

So I've been trying to figure this out for a couple days and was hoping someone could help. Essentially, I have a .gallery containing div (that has display flex on it) and in it are three .gallery__item divs that contain one .gallery__image each.I've tried a number of methods to get images to blur on hover, however none have worked without still having the flashing white border be there as well.

The closest method that's come close to working is the transform: scale(1.1) and overflow:hidden applied to .gallery__item. This does work, however since the transition is instantaneous, and also a bit jarring to the eye, I decided to apply a transition on the element to smooth things out a bit, but when I do this I get the white blur around the image's edges once again.

Other Methods Tried:

  1. backdrop-filter: blur(5px) on ::before pseudo element of .gallery__item The problem with this method is that the .gallery__item div had to have its height and width explicitly defined; something that, with my responsive layout wasn't working. Even in that case, it still had the white border.
    1. Creating duplicate images stacked on top of one another This didn't work for me. I could not get them to stack unfortunately

All in all, all of the other resources online said to scale the image up either by using transform: scale(1.1); or fiddling with the margins. The links are here --> (margin related question and transform scale question respectively).

My problem of the white borders still persists though, and is unique because I've tried and implemented the other methods out there but am still having a different problem - solely with the hover effect.

HTML

<div class="container">
  <div class="content">
      <div class="side-bar">
      </div> 
      <div class="hotel-view">
        <div class="gallery">
          <div class="gallery__item">
            <img src="https://i.ibb.co/L0JbQ2b/hotel-1.jpg" alt="" class="gallery__image">
          </div>
          <div class="gallery__item">
            <img src="https://i.ibb.co/1Xpvp5J/hotel-2.jpg" alt="" class="gallery__image">
          </div>
        </div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
      </div>
  </div>
</div>

CSS

.gallery {
  display: flex;
  justify-content: space-around;
}    
.gallery__item {
    overflow: hidden;        
}    
.gallery__image {
    display: block;
    width: 100%;
    transition: all .2s;
}    
.gallery__image:hover {
    filter: blur(5px);
    transform: scale(1.1);
}

If you need anymore info let me know; I'm happy to share whatever I can.

Branden Adler
  • 60
  • 4

1 Answers1

0

altering your gallery item css as to your code-pen link to:

.gallery__item {
    background : black;
    overflow: hidden;
               }

will change it to black.

This said you see that there is a general white background set that just takes some time to get changed.

Maybe you might to review your statically set backgrounds and check the amount of calculations and dependencies to render a real-time simulating behaviour.

scienceape
  • 1
  • 2
  • Thanks for the answer. I don't understand however what you mean of review statically set backgrounds and check 'calculations and dependencies'. Could you elaborate a little? – Branden Adler Mar 30 '20 at 20:20
  • sure, there is a CSS entry: .hotel-view { background-color: white; flex: 1; } maybe you do not want to implicitly set this – scienceape Mar 30 '20 at 20:23
  • Ah I see. I just tried that and the same problem remains unfortunately. Could you think of a way I could achieve this entire same thing but using absolute position (because right now Im using flex positioning) – Branden Adler Mar 30 '20 at 20:29