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

Thumbnail rollover effect on Summary Grid fail!


zay

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
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

  • 0

Hi Dear,

The effect still show opacity when I hover, did you get it solved

image.png.64d96f5290a1bb77b4ff108b13717702.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...