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
Screen Shot 2021-08-13 at 2.45.28 PM.png
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
Screen Shot 2021-08-13 at 2.45.28 PM.png
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.
Last edited by Rudi; August 16, 2021 at 08:34 AM.
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
Screen Shot 2021-08-16 at 1.48.19 PM.png
Second image, still first blur
Screen Shot 2021-08-16 at 1.48.29 PM.png
Third image, still first blur:
Screen Shot 2021-08-16 at 1.48.36 PM.png
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.
Screen Shot 2021-08-17 at 3.12.17 PM.png
On safari, adding overflow: hidden would fix it.
Screen Shot 2021-08-17 at 3.12.42 PM.png
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.