Hi guys! do you know how can i make my photo jump to the front when I am with the mouse on the photo? Normally i want to have the text in front but just when im moving my mouse on photo i want next photo ( me with out the background) jump in front of
Here is my public share link:
https://preview.webflow.com/preview/joannas-fresh-site-5463d7?utm_medium=preview_link&utm_source=designer&utm_content=joannas-fresh-site-5463d7&preview=78c3da0fa94c68d4e2d0939c977b9a6c&workflow=preview
give your slide__image-wrapper element position relative to be able to change its z-index then use custom code to change z-index to let’s say 100 on mouseover. If you would like to have this effect also on mobile devices you should use pointer events instead.
Thank you for your answer. I have done it but in my preview its doesn’t work : Webflow - Joanna's Fresh Site
Webflow gives this warning on any custom code entries
hi @Joanna_Szala delete this empty "InnerHTML"it does nothing. Sorry, I forget to remove it. All code is in page setting
I ma really grateful for your help, but can you explain me why sometimes is working, sometimes not?
Hope this visual will bring some light on why it is not working as expected.
Another thing is that your interaction is in the slider. This means you may have more than one slide__image--wrapper (one in each slide). so you have a few options but I do not have enough information to give you a correct answer.
OPTIONS:
if you would like to have this image interaction only on one slide you should give your wrapper id and select an element based on this id.
if you would like to have this interaction on all slides you need to create an Array of all image wrappers and add this interaction to each of these wrappers.
Here is a very simple example for opt.2
// create an array
const imgWrappers = Array.from(document.querySelectorAll(".slide__image--wrapper"))
// Add listeners to each image wrapper
imgWrappers.forEach( item => {
item.addEventListener("mouseover", zUp)
item.addEventListener("mouseout", zBack)
}
)
function zUp(){
// do stuff
}
function zBack(){
// do stuff"
}
or something similar.
hi @Joanna_Szala if you do not have further questions feel free to close your request if provided responses solved your issue