CE Phoenix Cart Forum

Posted: **Tue Jan 03, 2023 11:54 am**

I'm working on a store at the moment and would like to have the outer edges of the product images blurred. I have managed to do this on the index pages be using the below css and adding image-blurred-edge class to the product cards.

Code: Select all

.image-blurred-edge {
	position: relative;
}

.image-blurred-edge:before {
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 10px 8px #222;
    -webkit-box-shadow:inset 0px 0px 10px 8px #222;
    box-shadow:inset 0px 0px 10px 8px #222;
	pointer-events: none;
}

However, when I try to do the same on the pi-gallery it only blurs 3 of the edges.

blur.PNG

Any ideas on what the issue might be or even if there might be a better way to do this?

Posted: **Tue Jan 03, 2023 4:18 pm**

LeeFoster wrote: ↑Tue Jan 03, 2023 11:54 am However, when I try to do the same on the pi-gallery it only blurs 3 of the edges.
Any ideas on what the issue might be or even if there might be a better way to do this?

https://stackoverflow.com/questions/247 ... e-with-css
gives a variety of methods, some simpler than your example.
Internet search for "css blur edge of image" gives even more.
The pi-gallery image is probably having the css applied (check with Dev Tools) but the right edge of the image is not shown so maybe needs to be wrapped in another div with the css.

CE Phoenix Cart Forum

Image blur

Image blur

Re: Image blur