Display image on blurred version of same image

I am trying to display an image on a larger, blurred copy of the same image and have got some way towards that, but I’m puzzled as to why the image itself is blurred when it’s just the background image I want blurred.

Voila the codepen:

scratch that…
maybe opacity or z-index?

Ah, yes, I understand why it’s happening. I’m not applying it to the background image, I’m applying it to the div. Der!

1 Like

Okay, I think I’ve fathomed it out:

At least it does what I was trying to do, although there may be a better way to achieve the same result…


Not sure it’s any better as it requires a parent element, but a different way…


Eek, so now I’m torn. I think yours is neater as all the elements are contained together.

You don’t need the parent div. Just use imgHolder. :slight_smile:


I tried that, but it wasn’t working for some reason. :man_shrugging:

You just need to move your a styles to the imgHolder

.imgHolder {
  position: relative;
  width: 600px;
  height: 300px;

Then you can remove the parent.

The key is to using the .imgHolder::before pseudo-element for the background so it’s a sibling of the image and the blur only applies to it. Trying to put the background and blur directly on .imgHolder would make it apply to the child element also.

1 Like

That clinches it, then. Dunnit!


can I add this effect in my website