Adding Blur Effect On Image - css

Question

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

Answer 1

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" />

Answer 2

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 class="hover07 column">
<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>