Gallery option that maximize image when hovering

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!

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?