_yohandeschamps_ Posted June 24, 2023 Share Posted June 24, 2023 (edited) Hello I made my image on the carousel clickable by adding a CSS code. I can't figure out how to place the caption of each carousel image on the image, preferably centred. Is anyone could help me, please? Website: https://www.yohandeschamps-photography.com/ I am after something similar to this. Thank you in advance. Yohan D Edited June 24, 2023 by _yohandeschamps_ Link to comment
tuanphan Posted June 25, 2023 Share Posted June 25, 2023 You mean replace Dark Overlay with Text? _yohandeschamps_ 1 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
_yohandeschamps_ Posted June 25, 2023 Author Share Posted June 25, 2023 (edited) Hey Tuanphan. The black overlay came from the wrong code for the clickable carousel that I am about to remove. No, I mean text on the images, like the example in my first post. If, by any chance, you have a CSS to make the image clickable, that will be helpful. Thank you. Yohan Edited June 25, 2023 by _yohandeschamps_ Link to comment
Solution tuanphan Posted June 26, 2023 Solution Share Posted June 26, 2023 22 hours ago, _yohandeschamps_ said: Hey Tuanphan. The black overlay came from the wrong code for the clickable carousel that I am about to remove. No, I mean text on the images, like the example in my first post. If, by any chance, you have a CSS to make the image clickable, that will be helpful. Thank you. Yohan To make it clickable, add this CSS code body.homepage { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} To make text appear in middle of image, use this CSS body.homepage { .list-item-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999; width: 100%; text-align: center; } h2.list-item-content__title { max-width: 100% !important; } } 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
_yohandeschamps_ Posted June 26, 2023 Author Share Posted June 26, 2023 Thank you @tuanphan it is precisely what I needed. I have a last favour to ask, can you give me a CSS line to change the colour and the size of the text on the image, please? Thank you Yohan D Link to comment
tuanphan Posted June 27, 2023 Share Posted June 27, 2023 1 hour ago, _yohandeschamps_ said: Thank you @tuanphan it is precisely what I needed. I have a last favour to ask, can you give me a CSS line to change the colour and the size of the text on the image, please? Thank you Yohan D Use this body.homepage h2.list-item-content__title { color: white; font-size: 30px !important; } _yohandeschamps_ 1 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
_yohandeschamps_ Posted June 27, 2023 Author Share Posted June 27, 2023 Thank you kindly Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment