brianrolfephoto Posted June 8, 2022 Share Posted June 8, 2022 Site URL: https://brianrolfe.co.uk/main-home Is there any way to have a blog post in 7.1 have the title show on hover over the image instead of under it? Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 On 6/9/2022 at 6:27 AM, brianrolfephoto said: Site URL: https://brianrolfe.co.uk/main-home Is there any way to have a blog post in 7.1 have the title show on hover over the image instead of under it? I can't find blog page on your site. Can you share link to blog page? 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
brianrolfephoto Posted June 12, 2022 Author Share Posted June 12, 2022 On 6/11/2022 at 9:34 AM, tuanphan said: I can't find blog page on your site. Can you share link to blog page? sorry yes... https://brianrolfe.co.uk/blog-2 Link to comment
derricksrandomviews Posted June 12, 2022 Share Posted June 12, 2022 (edited) I believe blog summary blocks are a bit more flexible, easier to change with code. I have changed my blog posts listing quite radically using blog summary blocks but I don't have the title above the image on hover. I do have an image hover effect however. my random views Edited June 12, 2022 by derricksrandomviews brianrolfephoto 1 Link to comment
tuanphan Posted June 13, 2022 Share Posted June 13, 2022 12 hours ago, brianrolfephoto said: sorry yes... https://brianrolfe.co.uk/blog-2 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:hover .blog-basic-grid--text { opacity: 1; transition: all 0.3s; } 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
brianrolfephoto Posted June 13, 2022 Author Share Posted June 13, 2022 2 hours ago, tuanphan said: /* 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:hover .blog-basic-grid--text { opacity: 1; transition: all 0.3s; } Thanks! Really appreciate it! Is there any way to make that work like this site? https://www.justinpolkey.com Link to comment
derricksrandomviews Posted June 13, 2022 Share Posted June 13, 2022 I don't see any hover effects on the site you posted. What about that site do you wish to have on yours? Link to comment
brianrolfephoto Posted June 13, 2022 Author Share Posted June 13, 2022 2 hours ago, derricksrandomviews said: I don't see any hover effects on the site you posted. What about that site do you wish to have on yours? If you move your cursor over the image on that site the title comes up and the image has a white overlay on it. That's how I'd like to get my blog post images working. Link to comment
tuanphan Posted June 14, 2022 Share Posted June 14, 2022 10 hours ago, brianrolfephoto said: If you move your cursor over the image on that site the title comes up and the image has a white overlay on it. That's how I'd like to get my blog post images working. You mean Initial: Show image only Hover: Show overlay, show title over overlay Is this 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
brianrolfephoto Posted June 14, 2022 Author Share Posted June 14, 2022 12 minutes ago, tuanphan said: You mean Initial: Show image only Hover: Show overlay, show title over overlay Is this right? Yes exactly 🙂 Link to comment
tuanphan Posted June 15, 2022 Share Posted June 15, 2022 23 hours ago, brianrolfephoto said: Yes exactly 🙂 Add this new code 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
brianrolfephoto Posted June 15, 2022 Author Share Posted June 15, 2022 6 hours ago, tuanphan said: Add this new code 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; } LEGEND!! Amazing, thank you so much!! Link to comment
Marya Posted November 22, 2022 Share Posted November 22, 2022 (edited) On 6/15/2022 at 5:27 AM, tuanphan said: Add this new code 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; } @tuanphan Is this possible to do with the Masonry Blog? I'm having a difficult time finding the right CSS selectors 😢 Edited November 22, 2022 by Marya Link to comment
tuanphan Posted November 25, 2022 Share Posted November 25, 2022 On 11/23/2022 at 3:17 AM, Marya said: @tuanphan Is this possible to do with the Masonry Blog? I'm having a difficult time finding the right CSS selectors 😢 With Blog Masonry, use this code /* Blog Masonry - Hover */ .blog-masonry .blog-item-summary { position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%,-50%); opacity: 0; transition: all 0.3s; }.blog-masonry .masonry-ready .entry:hover .blog-item-summary { opacity: 1; transition: all 0.3s; } .blog-masonry .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-masonry .masonry-ready .entry.is-loaded:hover .image-wrapper:after { opacity: 1; transition: all 0.3s; } .blog-masonry .image-wrapper { position: relative; } efranken, Marya and E-W 1 2 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
mikelmuruzabal Posted May 22 Share Posted May 22 Hello Tuanphan, I just found what I was looking for, great to have the overlay effect on the blog post titles, which I use as a portfolio landing page. I want now to get the same effect for the "latest works" that I have in a summary block in the home page. If you could share how to do it it would be a great help. www.murustudios.squarespace.com pw: 1111 Thank you so much. Link to comment
tuanphan Posted May 25 Share Posted May 25 On 5/23/2023 at 6:04 AM, mikelmuruzabal said: Hello Tuanphan, I just found what I was looking for, great to have the overlay effect on the blog post titles, which I use as a portfolio landing page. I want now to get the same effect for the "latest works" that I have in a summary block in the home page. If you could share how to do it it would be a great help. www.murustudios.squarespace.com pw: 1111 Thank you so much. I see you figured it out? 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
mikelmuruzabal Posted May 31 Share Posted May 31 Hey Tuan, yes, we're still working on it but we achieved the effect, thank you! 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