Adding Blur Effect On Image-CodePudding

For adding blur effect on image, I create another element from the same image with absolute position, low opacity and blur effect. I don't think this is efficient. What's the best approach for this situation?

<img src="./images/shopping.svg" />
<img style="position: absolute;opacity: 0.5;filter: blur(10px);" src="./images/shopping.svg" />

Preview

CodePudding user response：

You can use drop-shadow filter, to achieve the desired effect. This also kills the need of using second img tag.

body{
  background: #222;
}

img{
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)) invert(100%);
  /* Note - I used invert(100%) to invert the colors since the original svg was black. 
            If you want to remove it, you need to use rgba(255, 255, 255, 0.5) for white                 
            shadow.
  */
}

<img src="https://www.svgrepo.com/show/80543/shopping-cart-outline.svg" width="300" />

CodePudding user response：

blur hover effect using like this may be it's helping us:

.column {
    margin: 15px 15px 0;
    padding: 0;
}
.column:last-child {
    padding-bottom: 60px;
}
.column::after {
    content: '';
    clear: both;
    display: block;
}
.column div {
    position: relative;
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 0 0 25px;
    padding: 0;
}
.column div:first-child {
    margin-left: 0;
}
.column div span {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: -1;
    display: block;
    width: 300px;
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure {
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure:hover span {
    bottom: -36px;
    opacity: 1;
}

/* Blur */
.hover07 figure img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover07 figure:hover img {
    -webkit-filter: blur(0);
    filter: blur(0);
}

<div >
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
</div>