RarelyWorried Posted June 2 Share Posted June 2 (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 by RarelyWorried added link to site Link to comment
Solution tuanphan Posted June 3 Solution Share Posted June 3 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment