Flip Images For Full Gallery Block on Hover

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.

You mean

Hover Image on Gallery >> Flip to a background color with text over?

Yes, this is correct.

Thank you!

You can add Poster Blocks, or Summary Block, then share link to page where you added this. We can give the code.

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.

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

Thank you.

If the text doesn't work, ideally, we would be aiming for the flip with just switching to another image without loosing the zooming and grey color effect.

Here's an example of the flip:

https://www.thesocietymanagement.com/development-women.web

But, maybe with a twist like in this video:

Anything you can help with, would be very much appreciated.

Thank you very much.

Hi there, wondering if you got any luck with this?

Thank you.

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

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;
}
}

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!

#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?

#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! 

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;	
}