background

I double 叒 yi to touch fish!! Today double 叒 yi is to do the demand, and found that the product gives a thumbnail to arrange the list (although the list only gives one to arrange the item, the other need to imagine) but I found! Imagination is always beautiful, but reality is very skinny!

What is frosted glass effect?

Glassmorphism is a very popular new design trend right now. You can see it on sites like Dribbble, and even big companies like Apple and Microsoft are using it. Basically, its main features are the translucent background, as well as shadows and borders.

FBI Warning! Now, I’m going to paint for you!!

We hope that we can fully show the prototype diagram of our product.

Something like the following

In the thumbnail list of images on the page, each image must not be the same size, size, aspect ratio. This will result in the following form

Such a occurrence, so it must be about, up and down will have a certain amount of white, black is not a good look ~

Results show

The Image is an official example Image of Ant Design’s Image component. Please contact me for deletion if it infringes.

So… In my impression, there seems to be an effect where the background shows a blurred image of the current image and the actual image is displayed in the middle of the whole box, similar to the one we implemented today

How’s that？ Does it work well? It’s much better than leaving white and black

The code to open lu

Let’s start by writing an HTML template code to mount our images and styles

<! DOCTYPEhtml>
<html>
  <head>
    <title>Achieve the frosted glass effect of the picture</title>
  </head>
  <body>
    <div class="background">
      <div class="background-content">
        <div class="background-content-image"></div>
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
          alt="Test picture"
        />
      </div>
    </div>
  </body>
</html>
Copy the code

Mainly for CSS, we use filter: blur() to blur the background image

<style>
  .background {
    width: 260px;
    height: 200px;
    overflow: hidden;
  }

  .background-content {
    width: 260px;
    height: 100%;
    position: relative;
    /* Center the image */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .background-content-image {
    position: absolute;
    /* The background should not be too large */
    z-index: -1;
    width: 260px;
    height: 100%;
    filter: blur(8px);
    background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  img {
    max-height: 100%;
  }
</style>
Copy the code

That’s how our frosted glass thumbnail preview looks, and it looks great!

Don’t forget to set overflow: Hidden for the parent element; Otherwise, blurred shadows and borders will overflow and affect other elements.

We use filter: blur() to achieve this, and this style is compatible. At present, mainstream websites with ground-glass effect are using backdrop backdrop: blur(); To implement.

The following is the relevant document I queried when I was looking for the problems I encountered. You can have a look at it. The effect is very nice and eye-pleasing. Believe that after the flattening effect, is the ground glass effect

What is Glassmorphism? Use only HTML and CSS

Glass UI

Glassmorphism in user interfaces

Fish is not easy!! In order to show you my latest fishing effect, at the same time, the schedule time is also shortened. If it’s even remotely helpful, just give it a thumbs up and go