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

Thumbnail rollover effect on Summary Grid fail!

Question

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;
}




Edited by zay
Initial Revision

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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


×
×
  • Create New...