ErkinDemir Posted November 15, 2021 Share Posted November 15, 2021 Site URL: https://erkindemir.net Hello there. I want to implement a hover effect +text to my clickable gallery. Similar to this site which discussed here before. Tried codes from lots of forum topics but couldn't make a difference (possibly I'm not great with the custom css.) Currently using 7.0 with Wells template. Is there anyone help me for adding this effect? Thanks. www.erkindemir.net Link to comment
Beyondspace Posted November 16, 2021 Share Posted November 16, 2021 20 hours ago, ErkinDemir said: Site URL: https://erkindemir.net Hello there. I want to implement a hover effect +text to my clickable gallery. Similar to this site which discussed here before. Tried codes from lots of forum topics but couldn't make a difference (possibly I'm not great with the custom css.) Currently using 7.0 with Wells template. Is there anyone help me for adding this effect? Thanks. www.erkindemir.net Try the following code in Home > Design > Custom Css to set the hover effect .image-slide-anchor:after { background: #fff; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .image-slide-anchor:hover:after { opacity: .7; } I can find the text in your page, can you check it again? ErkinDemir 1 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
ErkinDemir Posted November 16, 2021 Author Share Posted November 16, 2021 2 hours ago, bangank36 said: Try the following code in Home > Design > Custom Css to set the hover effect .image-slide-anchor:after { background: #fff; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .image-slide-anchor:hover:after { opacity: .7; } I can find the text in your page, can you check it again? Thank you so much!! the hover works, I unhide the texts now, but can only write them below the images. Do I need another code for writing them inside the image when hovering? Link to comment
Beyondspace Posted November 17, 2021 Share Posted November 17, 2021 13 hours ago, ErkinDemir said: Thank you so much!! the hover works, I unhide the texts now, but can only write them below the images. Do I need another code for writing them inside the image when hovering? Hi, you can add this to your Custom Css .image-slide-title { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 0 !important; transition: opacity 0.3s linear; pointer-events: none; } .image-slide-anchor:hover + .image-slide-title { opacity: 1; } Let me know if it works properly on your site Hope it can help you ErkinDemir 1 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
Beyondspace Posted November 17, 2021 Share Posted November 17, 2021 My testing result ErkinDemir 1 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
ErkinDemir Posted November 17, 2021 Author Share Posted November 17, 2021 6 hours ago, bangank36 said: Hi, you can add this to your Custom Css .image-slide-title { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 0 !important; transition: opacity 0.3s linear; pointer-events: none; } .image-slide-anchor:hover + .image-slide-title { opacity: 1; } Let me know if it works properly on your site Hope it can help you Thank you so much!! It works perfectly. One last question? Is it possible to apply this effect only selected pages and disable on other pages which also have galleries? Link to comment
Beyondspace Posted November 17, 2021 Share Posted November 17, 2021 39 minutes ago, ErkinDemir said: Thank you so much!! It works perfectly. One last question? Is it possible to apply this effect only selected pages and disable on other pages which also have galleries? You can set this in a specific page by selecting the page id in Css code. Replace my previous codes with the following ones #collection-6194f04471dc126cd439d19d .image-slide-anchor:after { background: #fff; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } #collection-6194f04471dc126cd439d19d .image-slide-anchor:hover:after { opacity: 0.7; } #collection-6194f04471dc126cd439d19d .image-slide-title { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 0 !important; transition: opacity 0.3s linear; pointer-events: none; } #collection-6194f04471dc126cd439d19d .image-slide-anchor:hover + .image-slide-title { opacity: 1; } 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
Beyondspace Posted November 17, 2021 Share Posted November 17, 2021 (edited) I 'd like to share you an extension - Squarespace ID Finder to get the element id of squarespace Here is how to get the id page: http://recordit.co/qwnj09oNCa Edited November 17, 2021 by bangank36 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
ErkinDemir Posted November 18, 2021 Author Share Posted November 18, 2021 12 hours ago, bangank36 said: I 'd like to share you an extension - Squarespace ID Finder to get the element id of squarespace Here is how to get the id page: http://recordit.co/qwnj09oNCa Thank you so much. Working great!! 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