I'm trying to get an image swap hover effect on each icon for my landing page. The effect, positioning + scale works when previewed in Squarespace however when testing in a browser tab the position + scale of the first images seem to change?
When changing the block padding in Inspector from 17px to 0px it fixes this issue, however I can't figure out how to apply this properly in my CSS?
Question
MorganB 1
Site URL: https://www.autofreshagri.tech/
Hi everyone,
I'm trying to get an image swap hover effect on each icon for my landing page. The effect, positioning + scale works when previewed in Squarespace however when testing in a browser tab the position + scale of the first images seem to change?
When changing the block padding in Inspector from 17px to 0px it fixes this issue, however I can't figure out how to apply this properly in my CSS?
Any help would be greatly appreciated!
Thanks in advance.
Website:
autofreshargi.tech
Code Used:
.image-swap img:nth-child(1) {
position: absolute;
transition: 0.2s;
}
.image-swap img:nth-child(1):hover {
opacity: 0;
}
block-yui_3_17_2_1_1613688107414_20349 {
padding: 0px;
margin: 0px;
}
Link to post
Top Posters For This Question
1
Popular Days
Feb 19
1
Top Posters For This Question
MorganB 1 post
Popular Days
Feb 19 2021
1 post
0 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment