Jump to content

Flip Images For Full Gallery Block on Hover

Recommended Posts

Site URL: https://carasmanagement.com/caras

How do you Flip the images of a gallery block?

I currently have a custom code for zooming in the images once you hover over each image, but I would like to flip the image and to show text OR a different images from the front one, that I want to add for once it's flipped and keep the zoom in effect as well.

I found this clear and great example below, however, this is for a single image block, and ours would be for a whole gallery block.

I appreciate anyone who can help with this. Thank you.

 

Link to comment
7 hours ago, Arca said:

So there's no way to do it directly with Gallery?

And yes, we could try that too. That would be very helpful! 

Thank you.

I guess possible. You can add Gallery with text, then share link. We will test & give the code

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

If you want to change image on hover, add this to Design > Custom CSS

/* Caras page */
[data-section-id="623d077fb692e80ca29028a9"] {
figure:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/06/21/23/11/asian-7276658__340.jpg);
}
figure:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/06/02/00/04/dog-7236774__340.jpg);
}
figure:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/07/06/12/58/woman-7305089__340.jpg);
}
figure:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/07/08/01/17/mother-7308238__340.jpg);
}
}

Repeat similar for other images

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

With flip, add this code

/* Caras page */
[data-section-id="623d077fb692e80ca29028a9"] {
	figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute;
    text-align: center;
    background-color: white;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
    z-index: 9999;
}

figure {
    position: relative !important;
}

.gallery-caption-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

figure:hover figcaption.gallery-caption.gallery-caption-grid-simple {
    opacity: 1;
    transition: all 0.3s;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I have tried, however, I would like to ask:

 

When changing image on hover:

  • Is there any way to have a smother transition? Not just instantly. 

 

When flipping to text:

  • Is there any way to keep the text below the image (in this case the name of the models which is there already) without affecting the extra text that is being added when the flip happens?

 

  • Also, how are we able to keep the text when fully flipped in vertical position?

 

Thank you so much for your help!

Link to comment

#1. Try this code (for first image, if it works, I will check other images)

figure.gallery-grid-item.has-clickthrough div a {
    background-image: url(https://cdn.pixabay.com/photo/2022/04/19/09/08/flowers-7142409__480.jpg);
    transition: all 0.3s;
    background-size: cover;
    background-repeat: no-repeat;
}
figure.gallery-grid-item.has-clickthrough:hover div img {
    visibility: hidden;
    transition: all 0.3s;
}

#2. You mean keep 2 text, 1 text under image and 1 text over image?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

#1.  It did work, but is does not change with a smooth fading effect. The duration of the 0.3 secs is a perfect time, but after the three seconds run, it changes super fast. 

#2.  Correct. To keep both, and the the one over image in a vertical layout instead of horizontal. 

 

Thank you very much for your help! 

 

Link to comment
17 hours ago, Arca said:

#1.  It did work, but is does not change with a smooth fading effect. The duration of the 0.3 secs is a perfect time, but after the three seconds run, it changes super fast. 

#2.  Correct. To keep both, and the the one over image in a vertical layout instead of horizontal. 

 

Thank you very much for your help! 

 

#1. Try this new code

figure.gallery-grid-item.has-clickthrough div a {
    background-image: url(https://cdn.pixabay.com/photo/2022/04/19/09/08/flowers-7142409__480.jpg);
    transition: all 0.3s;
    background-size: cover;
    background-repeat: no-repeat;
}
figure.gallery-grid-item.has-clickthrough:hover div img {
    visibility: hidden;
    transition: all 0.3s;
}
figure.gallery-grid-item.has-clickthrough div img {
    transition: all 0.3s;	
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.