Jump to content

Rollover images not the same size outside of the editor

Recommended Posts

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 comment
  • Replies 6
  • Views 370
  • Created
  • Last Reply

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

Link to comment

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

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. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.