Jump to content

Gallery option that maximize image when hovering

Recommended Posts

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. 

image.thumb.png.4cd1fb735e22e98d3201c3cdd0551307.png

 

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!

Link to comment
  • Replies 1
  • Views 217
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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. 

image.thumb.png.4cd1fb735e22e98d3201c3cdd0551307.png

 

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

image.thumb.png.f7533383c9670048e0a4fb69dd41fef6.png

Do you still need help?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.