Jump to content

Custom CSS for Hover Text Background Reveal

Recommended Posts

Site URL: https://www.loxd.io/portfolio-2


I'm looking to achieve a hover effect where once you over a logo image, a background image would reveal itself. I have the desired effect here with the big logotype in the center: https://www.loxd.io/portfolio-2 however it was only achieve by using the portfolio hover styling layout and changing the text link to a logo image via css on 7.1.

I think it can be better achieved by css without the use of the portfolio hover styling layout by targeting the background image and an image file but I'm unsure how to style the code along with it being responsive to different widths. Here's a working code that I've been tweaking with no success. 

.background {
visibility: hidden; 
opacity: 0;
transition-duration: 1s; 

.logo:hover .background {
visibility: visible; 
opacity: 1;

Thanks for the help!

Link to comment
  • Replies 0
  • Views 581
  • Created
  • Last Reply


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.