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

Thumbnail rollover effect on Summary Grid fail!


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.


Here's the code I'm using:

img.summary-thumbnail-image {
opacity: 1;
 transition: opacity .7s;

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

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