Hello guys,
Does anyone know how to create a blur effect on both sides for vertical image similar to the one on gumtree?
Reference: https://www.gumtree.com.au/s-ad/moor...as-/1196453197
Attachment 4327
Printable View
Hello guys,
Does anyone know how to create a blur effect on both sides for vertical image similar to the one on gumtree?
Reference: https://www.gumtree.com.au/s-ad/moor...as-/1196453197
Attachment 4327
Hello,
You need to use the same image as a background for the parent container and apply blur effect (filter: blur(15px)) playing with the css styles
you can create a ticket and we'll do it as a small customization
Ok,
1. go to templates > your_template > css > style.css > div.gallery div.preview > img
remove:
and add below this code:Code:Only registered members can view the code.
Code:Only registered members can view the code.
2. then go to tpl > controllers > listing_details.tpl
below the line:
add:Code:Only registered members can view the code.
Code:Only registered members can view the code.
3. Also in js > lib.js > find this.loadImage = function(obj){
below the line:
add:Code:Only registered members can view the code.
Code:Only registered members can view the code.
Thanks Rudi,
The code works great. But the blur image only show the 1st picture. Upon clicking on the second picture and forward, the background blur image is the same. Is there anyway we can make blur image change accordingly when clicking on different image?
First image, first blur
Attachment 4328
Second image, still first blur
Attachment 4329
Third image, still first blur:
Attachment 4330
I've edited my post
This is a great feature that should probably be considered to be added to the default install Rudi.
Hi Rudi,
I noticed that on firefox and chrome, the blur effect from image bleed out of the content box, and show a shadow effect on top and bottom. Please see screenshot.
Attachment 4331
On safari, adding overflow: hidden would fix it.
Attachment 4332
But it's not working on Firefox and Chrome. Do you have a solution for this?
Ok, add this style:
Code:Only registered members can view the code.