Display image on blurred version of same image

HTML & CSS
1

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:

2

scratch that…
maybe opacity or z-index?

3

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
4

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…

3 Likes
5

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

3 Likes
6

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

7

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

2 Likes
8

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

9

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
10

That clinches it, then. Dunnit!

4 Likes
11

can I add this effect in my website

12

Yes!

1 Like