hpeck
Member-
Posts
10 -
Joined
-
Last visited
hpeck's Achievements
-
SquareRefresh reacted to a post in a topic: How to change Lightbox overlay font
-
Site URL: http://hannahpeckillustration.co.uk I'd like to change this hover / overlay Lightbox font: to match the font I have before clicking (Adobe Calson Pro): I've checked my global style texts and they're all serif, so unsure where this is coming from. Any CSS I can stick on the end? thanks
-
Beyondspace reacted to a post in a topic: How to reformat hover text in Lightbox
-
Site URL: http://hannahpeckillustration.co.uk I've used CSS to add overlay & hover text over images which I like and want to keep; but I want to reformat the text inside the pop-up Lightbox to match. At the moment the banner is grey and text / font doesn't match. Any CSS I can add / edit? pw: webdesign2022 Hover style: Lightbox pop up I want fixed:
-
Beyondspace reacted to a post in a topic: How to code overlay text - colour issue
-
hpeck reacted to a post in a topic: How to code overlay text - colour issue
-
Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. You can really faintly see the overlay text, how do I get it to grey / black? .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: absolute; pointer-events: none !important; } .image-caption-wrapper { max-height: 100% !important; } .image-caption-wrapper { background: rgba(255,255,255,0.7) !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-0%,-0%); -ms-transform: translate(-0%,-0%); transform: translate(-50%,-50%); } .image-caption p { color: #ea4e4c !important; font-size: 20px !important; font-weight: semibold !important; text-transform: lowercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 0 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: ; opacity: .1; }
-
Site URL: https://pelican-fuchsia-f6eb.squarespace.com/config/design/custom-css The margins on my other pages are set to 48 width, but only option for galleries (in this case masonry) are full bleed, full, and inset, all of which are too big. I researched adding gallery blocks / spacers to either side of the gallery but I can't edit directly into this section, only options are the little design / content tab. Have marked up on attached what I want to achieve. thanks!