I am trying to add a hover image effect to my images. I found maybe two codes people made for others, with small changes they wanted.
This is the code I found, that I am trying to adapt to my website:
.fe-block-bb132b0013b8b2070bac:hover+div, .fe-block-bb132b0013b8b2070bac:hover+div+div {
position: relative;
top: -8px;
transition: all 0.7s !important;
}
.fe-block {
transition: all 0.7s !important;
}
This is how I have it:
.fe-block fe-block-yui_3_17_2_1_1717256967075_13588:hover+div, .fe-block-yui_3_17_2_1_1717256967075_13588:hover+div+div {
position: relative;
top: -8px;
transition: all 0.7s !important;
}
It sorta works, but when I hover over that image, instead of moving that image up, it moves an image below it up. I do not know anything about coding, so I am not sure what I am doing wrong.
The code line when I inspect the page for the image I want to move up is this:
<div id="yui_3_17_2_1_1717259672750_308" class="fe-block fe-block-yui_3_17_2_1_1717256967075_13588">
The image that is moving up when I hover over that image is this one:
<div id="yui_3_17_2_1_1717259672750_325" class="fe-block fe-block-9ff22697f1f69711ee16">
My website is published, but this page is not. So I am not sure how to share the page link. I will attach a video showing what is happening.
Any help is greatly appreciated!
website.mp4
