Leanie Posted February 24, 2020 Share Posted February 24, 2020 Hi, I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css. (I want to use a masonry gallery as my landing page that clicks through to each project). Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares. Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 Gallery with title, use this. After you create gallery with title, share url, We can check code to create hover effect 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!) Link to comment
Leanie Posted February 24, 2020 Author Share Posted February 24, 2020 @tuanphan I have tried adding the above code but it doesn't do anything to the gallery on the home page. URL: https://lanternfish-eagle-2flj.squarespace.com/ PW: 20244088 Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 1 minute ago, Leanie said: @tuanphan I have tried adding the above code but it doesn't do anything to the gallery on the home page. URL: https://lanternfish-eagle-2flj.squarespace.com/ PW: 20244088 Have you added description when uploading images yet? 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!) Link to comment
Leanie Posted February 24, 2020 Author Share Posted February 24, 2020 @tuanphan yes I have -see screenshot. This is just a test, wanted to see that it works before I upload my final files. Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 2 minutes ago, Leanie said: @tuanphan yes I have -see screenshot. This is just a test, wanted to see that it works before I upload my final files. Which code did you insert, in the link i sent above? 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!) Link to comment
Leanie Posted February 24, 2020 Author Share Posted February 24, 2020 @tuanphan This code (as per your link): body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { min-height: 60vh; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); } Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 3 minutes ago, Leanie said: @tuanphan This code (as per your link): You need to use both css (you inserted) + script code 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!) Link to comment
Leanie Posted February 25, 2020 Author Share Posted February 25, 2020 Hi @tuanphan Below is the code I am currently using. The descriptions now appear on each gallery item in the correct font and position. How do I now create a hover effect? body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: granville, serif; font-size: 30px; color: black; text-align: center; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; top: 50%; width: 100%; bottom: 0; padding: 0% 0%; box-sizing: border-box; } Link to comment
tuanphan Posted February 25, 2020 Share Posted February 25, 2020 .gallery-item-description { visibility: hidden; } figure.gallery-masonry-item:hover .gallery-item-description { visibility: visible; } 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!) Link to comment
Leanie Posted February 25, 2020 Author Share Posted February 25, 2020 @tuanphan thanks, that works perfectly! One more question. I would also like to add transparency to each image as part of the hover state. The below code seems to work, but only affects one image in the gallery. How do I apply it to all of the images? } .gallery-masonry:hover a img { opacity: 0.4!important; } Link to comment
Leanie Posted February 25, 2020 Author Share Posted February 25, 2020 @tuanphan I have used the below code you suggested in a previous forum to add transparency to images as part of the hover state, but this affects the text as well. Is there any way to get around that so that the text doesn't loose any opacity? figure.gallery-masonry-item.has-clickthrough:hover { opacity: 0.5; } Link to comment
tuanphan Posted February 27, 2020 Share Posted February 27, 2020 try this figure.gallery-masonry-item.has-clickthrough:hover img { opacity: 0.5; } 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!) Link to comment
Leanie Posted February 27, 2020 Author Share Posted February 27, 2020 fantastic, that works! thanks! Link to comment
jacquelineu Posted February 28, 2020 Share Posted February 28, 2020 On 2/24/2020 at 9:53 AM, tuanphan said: Which code did you insert, in the link i sent above? Hi, I am following all of your steps and it is still not working for me 😞 I cant figure out what I am doing wrong. Can you help? Link to comment
tuanphan Posted February 28, 2020 Share Posted February 28, 2020 1 minute ago, jacquelineu said: Hi, I am following all of your steps and it is still not working for me 😞 I cant figure out what I am doing wrong. Can you help? Can you share link to gallery on your site? 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!) Link to comment
jacquelineu Posted February 28, 2020 Share Posted February 28, 2020 30 minutes ago, tuanphan said: Can you share link to gallery on your site? https://dragonfly-porcupine-n37k.squarespace.com/config/pages Thanks for the quick reply!! I actually got it to work but I want to change the font. How do I make sure the the caption is on top on the additional transparency code? Also, how do I only apply this to certain galleries? Link to comment
tuanphan Posted February 29, 2020 Share Posted February 29, 2020 21 hours ago, jacquelineu said: https://dragonfly-porcupine-n37k.squarespace.com/config/pages Thanks for the quick reply!! I actually got it to work but I want to change the font. How do I make sure the the caption is on top on the additional transparency code? Also, how do I only apply this to certain galleries? Can you check again url? /config is url for site owner 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!) Link to comment
Givan Posted March 7, 2020 Share Posted March 7, 2020 On 2/24/2020 at 3:54 PM, Leanie said: Hi, I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css. (I want to use a masonry gallery as my landing page that clicks through to each project). Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares. Hello — I'm following this post mainly to understand how to force an index / project page to act like a masonry grid (automatic aspect ratio on thumbnails). I see you've managed to make it work on your site but I don't see the workaround / code for it in this thread. can you share you did it eventually? thank you in advance Givan Link to comment
zoebrock Posted March 28, 2020 Share Posted March 28, 2020 This reverts the old gallery options incredibly easily. https://www.ghostplugins.com/steps/9ehnk49g Link to comment
SureDesigns Posted June 10, 2020 Share Posted June 10, 2020 Hi, I too like the others here on the forum am trying to have the captions show up on hover for the images laid out using the Grid Masonry style. I appreciate you helping me with the CSS code as my working knowledge of coding is quite limited. So any or all help will be great! Do let me know what I need to provide you with in order for you to respond back. Thank you in advance. Link to comment
josiefish Posted January 27, 2021 Share Posted January 27, 2021 Hi @tuanphan , I followed this thread and it works for me. I'm just trying to create a heading and a sub-heading (about a sentence worth) within my description though. Is this possible?? I've also noticed that if the gallery item is also a button, the anchor is not applied to the .gallery-item-description . Can the anchor be applied to this as well? Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 1/27/2021 at 3:30 PM, josiefish said: Hi @tuanphan , I followed this thread and it works for me. I'm just trying to create a heading and a sub-heading (about a sentence worth) within my description though. Is this possible?? I've also noticed that if the gallery item is also a button, the anchor is not applied to the .gallery-item-description . Can the anchor be applied to this as well? Hi. Do you still need help? Can you share site url? 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!) Link to comment
Guest Posted February 22, 2021 Share Posted February 22, 2021 Hi there I cannot get the Descriptions under My Gallery Grid to be a larger font size ...24px and have each description aligned to the proper photo in the center. Can you help me? professionalinsurorsokc.com/oklahoma-business-insurance-industries Thanks! Link to comment
tuanphan Posted February 28, 2021 Share Posted February 28, 2021 On 2/23/2021 at 5:41 AM, ashersmom said: Hi there I cannot get the Descriptions under My Gallery Grid to be a larger font size ...24px and have each description aligned to the proper photo in the center. Can you help me? professionalinsurorsokc.com/oklahoma-business-insurance-industries Thanks! Hi. Add to Design > Custom CSS /* gallery title size */ p.gallery-caption-content { font-size: 20px !important; } 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!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.