Accoutergroupofcompanies Posted April 4, 2023 Share Posted April 4, 2023 I've added an accordion to my webpage https://www.boxnine7.com/s-portfolio-draft but rather than word titles that expand I want there to be images that you click to expand to read the explanations. Is this possible? I've attatched a reference image of what I'm going for, there does need to be subtitles but the option would be great Link to comment
Ziggy Posted April 4, 2023 Share Posted April 4, 2023 Are you looking for something a bit like this (boxes at the top of the first section)? https://blue-hexahedron-d6ae.squarespace.com Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Accoutergroupofcompanies Posted April 4, 2023 Author Share Posted April 4, 2023 (edited) Yes but if it could be images as the titles rather than words, the description is fine as a hover over lay. Also I don't need the colour features just a line outline Is enough Edited April 4, 2023 by Accoutergroupofcompanies Link to comment
Ziggy Posted April 4, 2023 Share Posted April 4, 2023 I can send the code I created for that client for you to adapt to your content. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Accoutergroupofcompanies Posted April 4, 2023 Author Share Posted April 4, 2023 yes that would be great Link to comment
Ziggy Posted April 4, 2023 Share Posted April 4, 2023 HTML: <div class="grid3"> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710">Learn more →</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">Learn more →</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">Learn more →</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">Learn more →</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">Learn more →</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">Learn more →</a></p> </div> </div> Custom CSS // Boxes! // CSS Grid 3x2 .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px; gap:20px 20px; } .grid3-item { text-align: center; padding:12px; border:1px solid white; min-height:210px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; transition: ease-in-out 0.1s; } .grid3-item h4 { font-family: 'Hatton-Semibold', serif; margin:0; } .grid3-item p { font-size:0.8rem; line-height:1.3em; visibility:hidden; height:0; opacity:0; } .grid3-item:hover { background-color:@main; box-shadow:6px 6px @accent; p { visibility:initial; height:initial; opacity:1; } } @media screen and (max-width:1000px) { .grid3 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap:20px; } .grid3-item { min-height:180px } } @media screen and (max-width:767px) { .grid3-item h4 { font-size:4vw; } } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Accoutergroupofcompanies Posted April 11, 2023 Author Share Posted April 11, 2023 How would I add images to this code? so that there would be images then you hover over and they would switch to text? Link to comment
Ziggy Posted April 11, 2023 Share Posted April 11, 2023 <img src="IMAGE URL HERE"> Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Accoutergroupofcompanies Posted April 11, 2023 Author Share Posted April 11, 2023 Where about in the code would this go? Below is the html code I have so far, I'm wanting to have the BOLD TITLES on a separate title form the text but I can't seem to do this whilst maintainting the hover effect- any ideas? <div class="grid3"> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_413710"> MADE TO ORDER Made in accordance with our customer's specifications to minimise wastage in production.</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-yui_3_17_2_1_1671041256442_426339">HAND CRAFTED Products and/or elements have been hand crafted by artisans to preserve craft traditions and support independent artisan businesses.</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-42da99d4a0e6627c7afe">ETHICAL Supply chain conforms with all relevant International Labour Organisation (ILO) policies surrounding child labour, workers rights, freedom of association, minimum wages and health & safety.</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-e7a6854510ee77df193c">ORGANIC Product is made up of >70% naturally occurring raw materials, without the use of chemical or other artificial elements.</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-4b50be3d262d44b57a30">FSC TIMBER Wood has been harvested in compliance with rules and regulations to protect our natural resources.</a></p> </div> <div class="grid3-item"> <h4 class="preFade fadeIn"> </h4> <p class="preFade fadeIn"> <br><br><a href="#lightbox_checks-all-the-boxes_#block-b5d38cf44218ea76dfc5">THOUGHTFUL FURNITURE Item is reclaimed, recycled or up cycled usually an Antique or Vintage item given a new life.</a></p> </div> </div> Link to comment
Ziggy Posted April 11, 2023 Share Posted April 11, 2023 I would move the titles into the <h4> tags, and the image before the <h4> Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Accoutergroupofcompanies Posted April 11, 2023 Author Share Posted April 11, 2023 This is what I have managed to do so far https://www.boxnine7.com/s-portfolio-draft-1 However, there are still several issues with the grid: I can't seem to get the outline visible (ideally it would be #607750) I want the images to disappear when hovered over and just show the text The text should be read as a subtitle and then the body Is there any chance you could advise on the above? Link to comment
Ziggy Posted April 11, 2023 Share Posted April 11, 2023 The CSS for border needs to be: border: 1px solid #607750; Image disappear on hover should be simply this: .grid3-item:hover img { display:none; } Not sure what you need to change for this: "The text should be read as a subtitle and then the body" Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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