pyong Posted July 3 Posted July 3 Hi everyone! Is it possible to create a vertical gallery grid type on the homepage that when you hover in the image it will show in full with a clickable text at the bottom? The attached image is the one I need to replicate. Here's what I have done but I am lost now /* Grid Gallery Captions on Hover */ .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center caption box vertically justify-content: center; // center caption box horizontally } .gallery-grid .gallery-caption-content { font-size: arial !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption text-align: center; // center text within caption box } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } @media only screen and (max-width: 640px) { .gallery-grid .gallery-caption-content { font-size: 1rem !important; // caption font size line-height: 1em; } } /* Image enlarge on hover */ .gallery-grid-item-wrapper img, figure.gallery-grid-item:hover img { transition: all 0.5s ease; } figure.gallery-grid-item:hover img { transform: scale(1.3); } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; } .gallery-grid-item:hover .gallery-caption { opacity: 1; transform: scale(1.3); z-index: 2; } Site: https://primrose-mouse-fmjj.squarespace.com/ PW: sjdraft Thank you in advance!
Beyondspace Posted July 3 Posted July 3 51 minutes ago, pyong said: Hi everyone! Is it possible to create a vertical gallery grid type on the homepage that when you hover in the image it will show in full with a clickable text at the bottom? The attached image is the one I need to replicate. Here's what I have done but I am lost now /* Grid Gallery Captions on Hover */ .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center caption box vertically justify-content: center; // center caption box horizontally } .gallery-grid .gallery-caption-content { font-size: arial !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption text-align: center; // center text within caption box } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } @media only screen and (max-width: 640px) { .gallery-grid .gallery-caption-content { font-size: 1rem !important; // caption font size line-height: 1em; } } /* Image enlarge on hover */ .gallery-grid-item-wrapper img, figure.gallery-grid-item:hover img { transition: all 0.5s ease; } figure.gallery-grid-item:hover img { transform: scale(1.3); } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; } .gallery-grid-item:hover .gallery-caption { opacity: 1; transform: scale(1.3); z-index: 2; } Site: https://primrose-mouse-fmjj.squarespace.com/ PW: sjdraft Thank you in advance! I check that it works now Do you still need help? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment