Text caption only appear on hover

vitamentltd
Tourist
17 0 1

I am trying to make the caption header only appear when you hover on the gallery image. See attached. 

the text appears fixed at all times, i want it only when you hover. When displayed on mobile it needs to be visble at the bottom of the image with a background or off the image so it can be seenScreenshot 2021-02-23 at 20.32.15.png

KetanKumar
Shopify Partner
14537 1674 5219

@vitamentltd 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
vitamentltd
Tourist
17 0 1

Thank you for you help. www.vitament.co.uk

0 Likes
vitamentltd
Tourist
17 0 1

I have fixed it so it appears when you hover over the link but this is not correct,  i need it to appear when you hover anywhere on the image. 

0 Likes
SagarSukhanandi
Tourist
148 25 42

Hello @vitamentltd 

Happy to help you on this issue

Add below code into at the end of  theme.css file

 

 

 

.grid__item.medium-up--one-quarter.js a:hover h3 { opacity: 1 !important; }
@media only screen and (max-width: 768px) {
 .image-bar__caption{
  opacity: 1 !important;
 }
} 

 

 

 

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
SagarSukhanandi
Tourist
148 25 42

Hello @vitamentltd 

Happy to help you on this issue

Add below code into at the end of  theme.css file

 

 

.grid__item.medium-up--one-quarter.js a:hover h3 { opacity: 1 !important; }
@media only screen and (max-width: 768px) {
 .image-bar__caption{
  opacity: 1 !important;
 }
} 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
KetanKumar
Shopify Partner
14537 1674 5219

@vitamentltd 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
SagarSukhanandi
Tourist
148 25 42

@vitamentltd 

Add below code at the end of your style file

.image-bar__content.image-bar__overlay:hover h3 {
    opacity: 1 !important;
}
@media only screen and (max-width: 768px) {
.image-bar__caption{
 opacity: 1 !important;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
vitamentltd
Tourist
17 0 1

Amaizng, could you please pass me the code, i will implement it into the store and hopefully mark as resolved  

0 Likes
SagarSukhanandi
Tourist
148 25 42

@vitamentltd Here is the code to put on css file 

 

.image-bar__content.image-bar__overlay:hover h3 { opacity: 1 !important; } 
@media only screen and (max-width: 768px) { 
.image-bar__caption{ opacity: 1 !important; }
 }

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes