Jump to content

Images Move Up on Hover

Go to solution Solved by Lesum,

Recommended Posts

Posted (edited)

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!

 

 

Edited by MeganR
Link to comment

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

Link to comment
  • Solution

@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!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.