ccsw Posted March 27, 2015 Share Posted March 27, 2015 Hi, I am looking to create an effect similar to on the following website: http://www.scoutstud.io/ My website uses the Hayden template and I am trying to create the effect on the following page: www.chriswhiteside.com/home Can anyone help with the CSS required? (I am new to this) Thanks in advance! Link to comment
ccsw Posted March 27, 2015 Author Share Posted March 27, 2015 I pretty much managed it using the following CSS: .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-top: 12em; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { background: rgba(240,240,240,0.8); } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { font-family: sans-serif, futura pt ; font-size: 14px; font-style: bold; text-transform: uppercase; letter-spacing:4px; color: #fff; opacity: 0; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { font-family: sans-serif, futura pt; font-size: 14px; font-style: bold; text-transform: uppercase; letter-spacing:4px; color: #000; opacity: 1; } However this CSS does not seem to work on the font which is not changing to 'futura pt' or to 'bold' as it should. The click-though link of the images is also no longer working, how can I fix this? www.chriswhiteside.com/home Link to comment
HeartAndDash Posted January 3, 2016 Share Posted January 3, 2016 I posted an answer to a similar question here. I provided code for changing the opacity of gallery grid images upon hover while also displaying the image title centered and at full opacity on hover. To see a sample of my code in use, check out my site. Link to comment
despair_ribs Posted April 8, 2016 Share Posted April 8, 2016 Just used the same and modified it to work with my galleries, but I can't get clickthrough URLs to work either. Anyone have thoughts on this? Link to comment
codeandtonic Posted July 4, 2016 Share Posted July 4, 2016 I've developed a commercial plugin that adds grid gallery block titles in front of the image with smooth hover effects. So if a result like the image below is what you're after, check out the plugin here. – Petri / Vox Pop Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem. Get in touch here! Link to comment
Arna Posted August 29, 2016 Share Posted August 29, 2016 @HeartAndDash: you are so awesome for posting the code. Thank you! I'm seeing a lot of comments from people that the titles are no longer appearing! @emca closed the thread where you posted your fabulous answer, but something's not right with the code (per a bunch of comments) and if you can't post a reply there, maybe here? Link to comment
brosenb Posted September 5, 2017 Share Posted September 5, 2017 @despair_ribs: To get the clickthrough link to work again, add the following line of code to the very end of the who code sequence within the last set of brackets. pointer-events: none; Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.