ecochrane Posted October 29, 2019 Share Posted October 29, 2019 Hi there, I'm looking to style a blog grid so that the title/subtitle text appears as an overlay on top of the photo. Right now I'm setting it up as a series of individual "poster" images. Is there a better way to do this / an easy setting I just need to change? I'd prefer to use something like a blog or gallery block if I could change the text. I've attached a screenshot showing the default blog layout vs what I'm hoping to achieve. Thanks, Emma Link to comment
ecochrane Posted October 29, 2019 Author Share Posted October 29, 2019 Update! It looks like a "portfolio overlay grid" element might work, in case anyone else is looking to do this. Link to comment
TimCc Posted June 25, 2022 Share Posted June 25, 2022 Has anyone been successful in achieving this on a SS7.0 site? Or know a work-around/CSS solution? I'm attempting to achieve this on a Canson site 🤔 Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 On 6/25/2022 at 5:54 PM, TimCc said: Has anyone been successful in achieving this on a SS7.0 site? Or know a work-around/CSS solution? I'm attempting to achieve this on a Canson site 🤔 If you share link to blog page on your site, we can give code to achieve this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TimCc Posted July 5, 2022 Share Posted July 5, 2022 On 7/1/2022 at 8:37 AM, tuanphan said: If you share link to blog page on your site, we can give code to achieve this Thanks @tuanphan! Link is https://tcooperphoto.com/frames/ Cheers Link to comment
tuanphan Posted July 5, 2022 Share Posted July 5, 2022 30 minutes ago, TimCc said: Thanks @tuanphan! Link is https://tcooperphoto.com/frames/ Cheers Add to Design > Custom CSS a.BlogList-item-title { position: absolute; top: 50%; z-index: 9999; width: 100%; text-align: center; color: white; } article.BlogList-item { position: relative; } .Blog-meta.BlogList-item-meta { position: absolute; top: calc(~"50% + 30px"); width: 100%; text-align: center; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TimCc Posted July 5, 2022 Share Posted July 5, 2022 You are truly magical @tuanphan, Thanks so much! Link to comment
Kellyx10 Posted July 11 Share Posted July 11 Hi @tuanphan Sorry to jump in. I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails. I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?https://www.the-plucx.com/work Your kind help will be truly appreciated. Link to comment
tuanphan Posted July 14 Share Posted July 14 On 7/11/2023 at 8:43 PM, Kellyx10 said: Hi @tuanphan Sorry to jump in. I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails. I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?https://www.the-plucx.com/work Your kind help will be truly appreciated. You mean for Print & Digital Item? Initial: show image, hide title Hover: show image, show title (over image), show an overlay over image Is that right? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Kellyx10 Posted July 19 Share Posted July 19 Hi @tuanphan Thanks for checking detail first : ) For PC views ↓ Initial: show image, hide title Hover: show image, show title (over image), show an overlay over imageFor Mobile views ↓ Initial: show image, show title Hover: show image, show title (below image), show an overlay over image Is this possible ? Link to comment
tuanphan Posted July 22 Share Posted July 22 On 7/11/2023 at 8:43 PM, Kellyx10 said: Hi @tuanphan Sorry to jump in. I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails. I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?https://www.the-plucx.com/work Your kind help will be truly appreciated. The url doesn't work now Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Kellyx10 Posted July 23 Share Posted July 23 @tuanphan Sorry, I accidentially revised the url name. Here it is: https://www.the-plucx.com/works I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails. For PC views ↓ Initial: show image, hide title Hover: show image, show title (over image), show an overlay over imageFor Mobile views ↓ Initial: show image, show title Hover: show image, show title (below image), show an overlay over image Your kind help will be truly appreciated. Link to comment
tuanphan Posted July 25 Share Posted July 25 On 7/23/2023 at 2:41 PM, Kellyx10 said: @tuanphan Sorry, I accidentially revised the url name. Here it is: https://www.the-plucx.com/works I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails. For PC views ↓ Initial: show image, hide title Hover: show image, show title (over image), show an overlay over imageFor Mobile views ↓ Initial: show image, show title Hover: show image, show title (below image), show an overlay over image Your kind help will be truly appreciated. Add to Design > Custom CSS /* Blig List - Hover Effect */ @media screen and (min-width:992px) { .blog-basic-grid--text { position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%,-50%); opacity: 0; transition: all 0.3s; } article.blog-basic-grid--container.entry.blog-item.is-loaded { position: relative !important; transform: unset !important; } .blog-basic-grid article:hover .blog-basic-grid--text { opacity: 1; transition: all 0.3s; } .blog-basic-grid .image-wrapper:after { content: ""; background-color: rgba(255,255,255,0.75); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s; } .blog-basic-grid article:hover .image-wrapper:after { opacity: 1; transition: all 0.3s; } .blog-basic-grid .image-wrapper { position: relative; }} Kellyx10 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Kellyx10 Posted July 25 Share Posted July 25 Magic! Thank you so mcuh, @tuanphan 🙂 tuanphan 1 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