Jump to content

designhalffull

Circle Member
  • Posts

    60
  • Joined

  • Last visited

Reputation Activity

  1. Like
    designhalffull reacted to MoltoBello in Summary Block Title and Excerpt Overlay on Hover   
    Site URL: https://lakerenfaire.com/virtual-faire-invite
    Good Evening Squarespacers!
    I am working on a gradient overlay for a grid summary block and have successful positioned the Title and Excerpt over the images in the summary block. I cannot seem to get them to display on hover, however, and the website only displays the gradient and transition, but not the text. I feel like this is close but I am missing something. 
     
    Here is my code:
    <!-- Rollover Image Effect --> <style> .summary-item img{position: relative; transition: all .5s ease!important;} .summary-content { position: absolute; color: #ffffff !important; top: 50%; left: 50%; opacity: 0; pointer-events: none; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);} .summary-title, .summary-metadata-primary, .summary-metadata-secondary, .summary-excerpt {color: #fffff !important;} .summary-item:hover img{-webkit-filter: brightness(50%); filter: brightness(50%);} .summary-content:hover {opacity: 1 !important;} </style>  
  2. Like
    designhalffull reacted to rwp in Summary Block Title and Excerpt Overlay on Hover   
    .summary-item:hover .summary-content { opacity: 1 !important; }  
×
×
  • 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.