Jump to content

Lightbox - Underline Hover Effect

Recommended Posts

Site URL: https://taranaomi.com/contact

Hi there!

wanting to get rid of the original hover effect on my lightbox form and replace it with a gradual underline. This is the code I have so far - the underline works but I don't know how to get rid of the black background. I need it to be transparent so I can put a background colour/images. I also need the underline to be brought closer to the "Coffee?" - tried reducing padding but it's not working.

Any help would be appreciated!

 

//Lightbox Adjustments //

.lightbox-handle {
  border: none !important;
  font-family: 'lost-lovers-regular' !important
  
}

button.lightbox-handle:before {
 width: 0%;
 height: 100%; 
 z-index: 3;
 content: '';
 position: absolute;
 left: 0;
 transition: .2s; 
}

button.lightbox-handle:before {     border-bottom: 1px solid #000000!important; 

button.lightbox-handle:hover:before {     transition-delay: .3s; 
}   

button.lightbox-handle:hover:before {   width: 100% !important; 
transition: .7s; 

}  

button.lightbox-handle:hover {     position: relative;     
transition: 0.5s;     
padding: 0 10px; 
cursor: pointer;     
-webkit-transition: 0.5s; 
font-style: italic !important;
}  

Screen Shot 2022-04-06 at 2.36.07 PM.png

Edited by caffeineandcopics
added a screenshot!
Link to comment
  • Replies 1
  • Views 295
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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

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