Hello,
I have an image gallery block on my home page. I would like my text to appear in the center of each image only on the hover. My theme doesn’t allow for this. It will apply the hover text in the middle of the screen rather than on the image. So it needs to be coded in the back end. I am using Exhibit theme. Right now I have applied text to the image itself, but you can see what I want to achieve on hover.
Here’s is an example of what I want the home page image text to appear like: https://mfpen.com/
My website: https://nuijewellery.com.au/
Please help!
Hi @jewellerystore1
Please add this code to your theme.liquid file after to do that
Brilliant. Can’t thank you enough!
There is a tiny movement of the image when I hover. Is this able to be removed?
I can’t see the image moving when I hover on my end.
Apologies. It was just the desktop I was on. It’s not there.
Thanks again!
I have added a new block of images but the overlay isn’t performing the same. It is overlaying like my product tiles instead of Collage block above. Are you able to help please?
Hi there again,
Unfortunately, every time I duplicate the theme with this customisation the code doesn’t apply despite it being in the theme.liquid file. Do you know why this is only working on my live them?
Hi @jewellerystore1
Because ID of sections will be changed when you add them in the new theme
Is there a way to make this change permanent on all Collage Blocks? If not, how do I find out the section ID to update the code?
Thanks
Your theme does not have a class to determine they are Collage blocks so that you can add this code to Custom CSS to Collage blocks section
a.inset-0 {
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
color: #fff;
}
a.inset-0 span {
position: unset !important;
width: auto !important;
height: auto !important;
}
@media (min-width: 990px) {
a.inset-0 {
opacity: 0;
}
li.relative:hover a.inset-0 {
opacity: 1;
}
}
Perfect! that worked. Thanks to much.
Would you happen to know why when I open my website url, the ‘Journal’ tab on the left side bar is automatically open? It should be closed until the user clicks the plus sign.
https://nuijewellery.com.au/
