I'm having a rollover issue. I found some CSS to go from a black icon to one with color on hover, and it works perfectly within Squarespace. But when I view it in a separate browser window or different browser, the original icons aren't the same size as the hover versions. The attached images are what it's supposed to look like and what it actually looks like outside of the editor.
Question
KaijuCorgi 0
Site URL: https://pineapple-sapphire-khkb.squarespace.com/
I'm having a rollover issue. I found some CSS to go from a black icon to one with color on hover, and it works perfectly within Squarespace. But when I view it in a separate browser window or different browser, the original icons aren't the same size as the hover versions. The attached images are what it's supposed to look like and what it actually looks like outside of the editor.
Here is the CSS I'm using:
.icon-swap-linkedin img:nth-child(1) {
position:absolute;
transition: .5s;
}
.icon-swap-linkedin img:nth-child(1):hover {
opacity:0;
}
.icon-swap-twitter img:nth-child(1) {
position:absolute;
transition: .5s;
}
.icon-swap-twitter img:nth-child(1):hover {
opacity:0;
}
.icon-swap-instagram img:nth-child(1) {
position:absolute;
transition: .5s;
}
.icon-swap-instagram img:nth-child(1):hover {
opacity:0;
}
password is guava
Link to post
Top Posters For This Question
4
3
Popular Days
Aug 12
5
Aug 13
2
Top Posters For This Question
KaijuCorgi 4 posts
RyanDejaegher 3 posts
Popular Days
Aug 12 2020
5 posts
Aug 13 2020
2 posts
Posted Images
6 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