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

zay

Circle Member
  • Content Count

    12
  • Joined

  • Last visited

Posts posted by zay


  1. Hi guys

    I'm trying to create a hover effect whereby the image fades out and the title appears.

    When I hover over the title I completely lose the opacity effect!

    I've cobbled together some code from lots of different places on this forum so it's probably super obvious where I'm going wrong.

    The page url is https://damien-creagh.squarespace.com/drama-gallery

    Would really appreciate some guidance.

    Thanks!

    Here's the code I'm using:

    
    
    img.summary-thumbnail-image {
    opacity: 1;
     transition: opacity .7s;
    }
    
     img.summary-thumbnail-image.loaded:hover 
     { 
     opacity: 0.3; 
     }
    
    
      .sqs-block-summary-v2 .summary-item .summary-title { 
       transform: translateY(-10%);
     opacity: 0;
     transition: transform .6s ease-out, opacity .5s;
     hyphens: auto;
      text-align: center;
        position: absolute;
         left: 20%;
         top: 50%;
      width:70%;
         margin-left: auto;
         margin-right: auto;
      }
    
    
       .sqs-block-summary-v2 .summary-item:hover .summary-title
      { 
      transform: translateY(0);
     opacity: 1;
        text-align: center;
        position: absolute`enter code here`;
         left: 20%;
         top: 50%;
         margin-left: auto;
         margin-right: auto;
        width: 70%;
        hyphens:none;
      }
    
    .sqs-block-summary-v2 .summary-item .summary-title a {
     font-size: 1em;
      z-index:20000 !important;
      font-size: 140%;
      color: #2a2a2a;
      display: block;
    }
    
    
    
    
    

×
×
  • Create New...