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!

Is there a way for you to make the page accessible by a link? So I can inspect the code and adapt the code

2 hours ago, sorca_marian said:

Is there a way for you to make the page accessible by a link? So I can inspect the code and adapt the code

https://www.robinsoninteriors.design/shop

Hopefully, that works.

17 minutes ago, Lesum said:

@MeganR You can try adding this code snippet under Utilities > Website Tools > Custom CSS. 

The following code will create a hover effect only on the images displayed on the shop page.

section[data-section-id="665b43987735314d47226f23"] {
	.image-block-outer-wrapper {
		transition: top ease 0.7s;
	}
	.image-block-outer-wrapper:hover {
		position: relative !important;
		top: -8px;
	}
}

Prior to testing this code, please ensure that any existing code related to image hover effects has been removed. Let me know how it goes. Thanks!

Yes, that worked! Thank you so much 🙂