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

Header Instagram Icon Hover Text


franvandee

Question

9 answers to this question

Recommended Posts

  • 0
19 hours ago, franvandee said:

yes, that is correct

Add to Design > Custom CSS

/* Hover instagram - First icon */
a.icon.icon--fill[href*="pink_moon_beauty"] {
    position: relative;
}
a.icon.icon--fill[href*="pink_moon_beauty"]:after {
    content: "This is instagram 1";
    display: block;
    position: absolute;
    width: 150px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    top: -30px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
}
a.icon.icon--fill[href*="pink_moon_beauty"]:hover:after {
    opacity: 1;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@tuanphan has provided a neat solution above, to add a label to one of the icons. To do this for both icons, you'd need to duplicate the code, changing the label names and URLs for each icon.

However, duplicating code isn't good practice -  a fundamental software engineering principle is 'DRY' or "Don't Repeat Yourself" - so here is a slightly modified version of the previous answer. This styles the labels once and then adds the individual labels for the two icons below.

1363835015_igiconlabels.gif.cfb534e8b5ed15b3b285dd85f53dd04e.gif

 

/* Label on hover over social icons */
a.icon.icon--fill:after {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
    padding: 4px 7px;
    border-radius: 5px;
    opacity: 0;
}
a.icon.icon--fill:hover:after {
    opacity: 1;
}
/* Label for Beauty icon */
a.icon.icon--fill[href$="/pink_moon_beauty__/"]:after {
    content: "Beauty";
}
/* Label for Boutique icon */
a.icon.icon--fill[href$="/pink_moonboutique/"]:after {
    content: "Boutique";
}

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

Thank you guys so much for your smart and apt answers.

I am just not sure why i am not getting the desired result ?
I go tp the home page, Settings, Advanced, and I paste the Custom CSS.
But when I preview the page, there is no difference? Am I doing something incorrect?

 

 

image.thumb.png.e9db8008b71cc1b4259bbfca0b2a38ae.png

Link to comment
  • 0
4 minutes ago, franvandee said:

I go to the home page, Settings, Advanced, and I paste the Custom CSS.
But when I preview the page, there is no difference?

Custom CSS goes in Design > Custom CSS, not in the Advanced Page Settings or Code Injection areas.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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