mixedbyandrea Posted April 8, 2021 Share Posted April 8, 2021 Site URL: https://www.andrealepori.com Hey guys, Hope you're all doing well, I am having some trouble using a CSS custom code in order to make nicer captions on my new website. The idea would be to have my credits for each album showing up on hover while being linkable to an external url (spotify) Anyone could help me with this? I am currently using this bit of CSS, but can't make the links working?being clickable again. Hope it makes some sense figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } figure.gallery-masonry-item .gallery-masonry-item-wrapper:before { background-color: rgba(0,0,0,0.7); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 0.6; transition: all 0.5s; } figcaption { padding: 0 !important; } mba_website.mov Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 Hi. What is password? 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
mixedbyandrea Posted April 12, 2021 Author Share Posted April 12, 2021 Hey man, thanks so much for your reply Pw S@ulGr3n4ds Cheers Link to comment
tuanphan Posted April 15, 2021 Share Posted April 15, 2021 On 4/12/2021 at 4:47 PM, mixedbyandrea said: Hey man, thanks so much for your reply Pw S@ulGr3n4ds Cheers It looks like you solved? I see it can clickable here 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
mixedbyandrea Posted April 15, 2021 Author Share Posted April 15, 2021 hey @tuanphan I've just applied a simple <a href to the actual descriptions - not the best solution but a bit of a quick workaround I'd say. Still need to figure out how to make every image clickable despite the caption being on hover and the scale transform. If that makes any sense.... Cheers Link to comment
tuanphan Posted April 17, 2021 Share Posted April 17, 2021 On 4/15/2021 at 6:50 PM, mixedbyandrea said: hey @tuanphan I've just applied a simple <a href to the actual descriptions - not the best solution but a bit of a quick workaround I'd say. Still need to figure out how to make every image clickable despite the caption being on hover and the scale transform. If that makes any sense.... Cheers Hi. Try removing a href on 1 image, then let me know. I will try checking that image easier. 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
mixedbyandrea Posted April 20, 2021 Author Share Posted April 20, 2021 Hey @tuanphan I've duplicated that home here www.andrealepori.com/test Removed a href from the first 4 images Let me know if t helps at all? Cheers Link to comment
tuanphan Posted April 20, 2021 Share Posted April 20, 2021 3 hours ago, mixedbyandrea said: Hey @tuanphan I've duplicated that home here www.andrealepori.com/test Removed a href from the first 4 images Let me know if t helps at all? Cheers Have you added link in this box yet? 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
mixedbyandrea Posted April 20, 2021 Author Share Posted April 20, 2021 Hey @tuanphan yes I did, actually but they don’t work unfortunately I’ve updated the link now in that same page so you can check it out Cheers Link to comment
tuanphan Posted April 21, 2021 Share Posted April 21, 2021 22 hours ago, mixedbyandrea said: Hey @tuanphan yes I did, actually but they don’t work unfortunately I’ve updated the link now in that same page so you can check it out Cheers Hi, I don't see any images :( 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
mixedbyandrea Posted April 21, 2021 Author Share Posted April 21, 2021 so weird here's how I see it in Chrome Mac Link to comment
tuanphan Posted April 24, 2021 Share Posted April 24, 2021 On 4/20/2021 at 2:58 PM, mixedbyandrea said: Hey @tuanphan I've duplicated that home here www.andrealepori.com/test Removed a href from the first 4 images Let me know if t helps at all? Cheers Remove this code figure.gallery-masonry-item .gallery-masonry-item-wrapper:before { background-color: rgba(0,0,0,.8); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 1; transition: all .3s } .gallery-caption { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 102%; text-align: top; opacity: 0; transition: all .3s ease; background-color: transparent; height: 100% } .gallery-masonry-item:hover .gallery-caption { opacity: 1; transition: all .9s ease } .gallery-caption-wrapper { display: flex; place-items: center; justify-content: center } .gallery-grid-lightbox-link:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999 } Add this code figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.75); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } https://www.loom.com/share/5344d004fcad4f7b8f350219bac1b8bf 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
mixedbyandrea Posted May 6, 2021 Author Share Posted May 6, 2021 @tuanphan thanks sooo v much for this man worked like a charm ! Cheers A Link to comment
mixedbyandrea Posted May 9, 2021 Author Share Posted May 9, 2021 Hey @tuanphan I’d love to, but not sure how thanks a million ! A Link to comment
tuanphan Posted May 12, 2021 Share Posted May 12, 2021 On 5/10/2021 at 2:50 AM, mixedbyandrea said: Hey @tuanphan I’d love to, but not sure how thanks a million ! A Add to Design > Custom CSS /* tablet issues */ @media screen and (max-width:767px) { /* footer email line spacing */ div#block-706d28dbd3f6b1dcce07 p { line-height: 20px; } /* home huge spacing */ div#block-yui_3_17_2_1_1618358544464_4769 { display: none; } footer.sections section { min-height: unset !important; } } 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
mixedbyandrea Posted May 16, 2021 Author Share Posted May 16, 2021 Hey @tuanphan thank you sooo much. that seems to work really well. Can I be v cheeky and ask your advise on how to sort the top design on bigger screens ? this is how the header and text at the top L ook like on a 2560x1440 px display - full screen. Do you happen to know how can I sort this to properly fit on bigger screens ? thanks a lot for all your great help ! Link to comment
tuanphan Posted May 18, 2021 Share Posted May 18, 2021 On 5/16/2021 at 7:05 PM, mixedbyandrea said: Hey @tuanphan thank you sooo much. that seems to work really well. Can I be v cheeky and ask your advise on how to sort the top design on bigger screens ? this is how the header and text at the top L ook like on a 2560x1440 px display - full screen. Do you happen to know how can I sort this to properly fit on bigger screens ? thanks a lot for all your great help ! Can you describe the desired layout on full screen? 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
mixedbyandrea Posted May 19, 2021 Author Share Posted May 19, 2021 Absolutely, I'd like to get it to look always like this attached - no matter the display resolution? Thanks a lot ! A Link to comment
mixedbyandrea Posted June 1, 2021 Author Share Posted June 1, 2021 Hi @tuanphan sorry to bother again, any idea on how could I achieve this ? thanks a lot! Link to comment
tuanphan Posted June 2, 2021 Share Posted June 2, 2021 On 6/1/2021 at 8:13 PM, mixedbyandrea said: Hi @tuanphan sorry to bother again, any idea on how could I achieve this ? thanks a lot! I see it looks fine. What problem here? 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
mixedbyandrea Posted June 3, 2021 Author Share Posted June 3, 2021 9 hours ago, tuanphan said: I see it looks fine. What problem here? Hi @tuanphan on larger resolution displays it looks like this ⬇️ Not sure how to fix it. cheers Link to comment
NGO2045 Posted October 5, 2021 Share Posted October 5, 2021 On 4/24/2021 at 10:57 AM, tuanphan said: Add this code figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.75); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } This code worked perfect for me. But when I'm trying to add zoom hover effect for gallery masonry with this code, the hover effect doesn't work. Do you know why? Hover zoom code: .gallery-masonry-item img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important;} Gallery-code-name{overflow:hidden!important} Link to comment
tuanphan Posted October 7, 2021 Share Posted October 7, 2021 On 10/5/2021 at 10:32 PM, NGO2045 said: This code worked perfect for me. But when I'm trying to add zoom hover effect for gallery masonry with this code, the hover effect doesn't work. Do you know why? Hover zoom code: .gallery-masonry-item img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important;} Gallery-code-name{overflow:hidden!important} Can you share link to gallery on your site? We can check easier 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
CoiaCreative Posted December 16, 2021 Share Posted December 16, 2021 Using the code for the hover over is there a way to increase the caption font size or change colour? Link to comment
tuanphan Posted December 19, 2021 Share Posted December 19, 2021 On 12/16/2021 at 4:00 PM, CoiaCreative said: Using the code for the hover over is there a way to increase the caption font size or change colour? Add this code .gallery-caption * { color: red !important; font-size: 50px !important; } 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