gppp96
Member-
Posts
17 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by gppp96
-
Link not working on CSS hover overlay effect on masonry grid.
gppp96 replied to Sean_M's topic in Customize with code
I have the same issue. Here the page https://apricots-tunny-yy4c.squarespace.com/works password Hiro96 Here is the current code : body#collection-6279314ca417ed4a39ac61a0 { figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper:after { background: rgba(255,255,255,0.6); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; z-index: 9999; } .gallery-masonry-item:hover .gallery-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } figure:hover .gallery-masonry-item-wrapper:after { opacity: 1; }} body#collection-6279314ca417ed4a39ac61a0 { figure p.gallery-caption-content:after { display: block; position: absolute; top: calc(~"50% + 10px"); } figure:nth-child(1) p.gallery-caption-content:after { content: "Hiro | 2022"; } figure:nth-child(2) p.gallery-caption-content:after { content: "Hiro | 2021"; } figure:nth-child(3) p.gallery-caption-content:after { content: "Cyrcus | 2020"; }} body#collection-6279314ca417ed4a39ac61a0 { figure p.gallery-caption-content:after { display: block; position: absolute; top: calc(~"50% + 10px"); } figure:nth-child(4) p.gallery-caption-content:after { content: "Hiro | 2021"; } figure:nth-child(5) p.gallery-caption-content:after { content: "Prototype | 2020"; }} Thanks a lot! -
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
-
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
Everything works, but I still dont have the possibility to link a page to the image... Can I also modify the dimension of the caption title or put it in bold? Thanks! -
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
And now I lost the possibility to link the image project to another page... Thanks! -
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
yes. all works, the caption looks a bit opaque, its almost invisible. theres a way to do it a bit more black? How can I add another line under the caption? Thanks in advance -
yes
- 23 replies
-
- hover
- grid-gallery
-
(and 3 more)
Tagged with:
-
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
ok done. https://apricots-tunny-yy4c.squarespace.com/config/design now I need to put the caption in black on the image with a white opacity white layer + a subtitle under each caption. Thanks -
like this website http://www.erinsanger.com/ but with white shadow on the image and black font title + subtitle.
- 23 replies
-
- hover
- grid-gallery
-
(and 3 more)
Tagged with:
-
Hi all. I would like to achieve the same results of lenW website. I would like to add an opaque white layer on the image with a black title and subtitle on it when the cursor goes on top. this is the page https://apricots-tunny-yy4c.squarespace.com/nuova-pagina password Hiro96 Thank you!
- 23 replies
-
- hover
- grid-gallery
-
(and 3 more)
Tagged with:
-
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
Ive tried to put a normal photo gallery istead of the plugin. I like the result of it. I also manage to link the image to its personal description in another page. The Problem is that I can ’ t put text subtitles overlay like in the portfolio page. Do you have any idea? https://apricots-tunny-yy4c.squarespace.com/nuova-pagina this is my new page add text and foto overlay opacity like in my portfolio page. I will delete then the portfolio page. This is my portfolio page---- https://apricots-tunny-yy4c.squarespace.com/works-1 Thanks a lot -
Set up a new portfolio with a customized grid
gppp96 replied to gppp96's topic in Site Design & Styles
no, but im trying to substitute the portfolio page, with a image gallery with the overlay subtitle and a link attached to it. is it possible? -
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
yes -
Set up a new portfolio with a customized grid
gppp96 replied to gppp96's topic in Site Design & Styles
Thanks for your reply. https://apricots-tunny-yy4c.squarespace.com/config/ password: Hiro96 I found this website. He made it but in 5 colums, I would need only 2 columns... https://www.jeremyodonnell.co.uk/ -
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
https://apricots-tunny-yy4c.squarespace.com/config/settings Password: Hiro96 Thanks! -
Custom Aspect ratio for portfolio pages
gppp96 replied to nikkisknaks's topic in Site Design & Styles
Please can you help me to achieve a similar result? (check image reference) https://apricots-tunny-yy4c.squarespace.com/config/design/custom-css -
Site URL: https://apricots-tunny-yy4c.squarespace.com/config/pages I'm trying to create a new grid from a portfolio template. I would like to change its aspect ratio for each project (for example 4: 3 size or 2: 3 vertical size). This is not possible for me with the basic template. Is there a code to do all this?. if so, where should I enter it?. I'm attaching a photo of how I would like it to come. Also I was wondering how to add a subtitle to the overlay caption for each project (project name and client name). Thanks in advance. https://apricots-tunny-yy4c.squarespace.com/config/pages