zay Posted July 5, 2019 Share Posted July 5, 2019 (edited) 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 July 5, 2019 by zay Initial Revision Link to comment
Beyondspace Posted June 20, 2020 Share Posted June 20, 2020 Hi Dear, The effect still show opacity when I hover, did you get it solved Greeting, it's 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: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf 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 comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment