RarelyWorried Posted June 2, 2023 Posted June 2, 2023 (edited) Hi there, I am hoping to move the title of the blog posts that is currently below the post and i want it to be ovelayed on top of each blog post's image with a slight overlay so the white text is visible. Is this possible with CSS? The old Farro Template on 7.0 had something similar built into it. I would really appreciate some guidance. Edited June 2, 2023 by RarelyWorried added link to site
Solution tuanphan Posted June 3, 2023 Solution Posted June 3, 2023 Add to Design > Custom CSS /* Blig List - Hover Effect */ .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; } 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!)
nolenna Posted January 14 Posted January 14 I would like this same effect but with the title of article displayed at all times, is that possible?
tuanphan Posted January 15 Posted January 15 On 1/14/2024 at 8:50 AM, nolenna said: I would like this same effect but with the title of article displayed at all times, is that possible? Change to number 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment