Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Rollover images not the same size outside of the editor


KaijuCorgi

Question

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

image.png

image.png

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

@RyanDejaegherI did get it to work on the first icon, but there are a couple snags. As you roll over the empty space in the icon (the "in"), the color effect goes off, causing a jittering effect if you move your mouse all the way across. Also, transition is being ignored outside the editor (I can't remember if this was working outside the editor before or not). 

I tried a version with a background fill color for the "in" instead of no fill, but that didn't seem to change anything. Looking at the svg code all I see is the dark fill. 

I'm learning the required css (and vector requirements) from scratch so this could def be user error. 

Edited by KaijuCorgi
Link to post
  • 0

@KaijuCorgi looks like you were adding the hover on the path, so when you hover over the letters it breaks the effect, if you add the hover on the svg it will work.

Try adding this to your custom CSS

 

svg {
    fill: black;
}

svg:hover  {
    fill: red;
}

Result:

 

CleanShot 2020-08-12 at 20.30.25.gif

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to post
  • 0

Wow, I feel like I'm really missing something. I copy + pasted your css in, removed my additions to the svg code, and now it's not doing anything on hover. Clearly it should work 😕  I hugely appreciate all your help and this method is so slick. Could I do it the original way and set the image sizes, or will Squarespace override that? 

Edit: Did some google digging and found this thread: 
https://github.com/filamentgroup/grunticon/issues/235 "TL;DR: Also make sure there are no fill="xxxx" attribute in your svg markup"

So I deleted that from my svg code and it worked! WHEW. I'll put in proper colors and see if I can get it working for the other two icons. 

Edited by KaijuCorgi
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...