Search the Community
Showing results for tags 'overlay'.
-
Hi, I'm working on a portfolio landing page, I want the 'Hover: Follow Cursor', I have the text visible then image shown on hover, but problem is that you can't hover on mobile or tablet without clicking through to each project. I want to create a code which registers a breakline for tablet width and changes the portfolio layout to 'Grid: Overlay' I don't know how this isn't a built in option as hovering over text to see an image on mobile is only done badly and with difficulty. Thank you in advance to anyone who can help. www.orthis.co/portfolio
-
Because that photos actually smaller on the webpage, it's obsuring some of the photo. Is there a way to make the that black lightbox smaller. I have other photos on this page and it's happening on those as well. I will just target this collection if I can make this happen. Thanks in advance.
-
I'm having trouble removing the white overlay that appears on gallery thumbnails when the mouse is hovered on them. The desired behaviour is for the thumbnails to still be clickable like usual (to enter Lightbox view), but to have no associated hover effect. I assume this can be achieved by some custom CSS, but I can't figure out the correct identifier for the hover effect and gallery page. I'd appreciate it if someone could help me with this! I'm using the Wells template in Squarespace 7.0. The website is located at https://jamiekanehisa.art. -
Hello! I am trying to create an overlay with an image inside of a gallery Lightbox, so that when the user hovers over the image, this overlay appears. I managed to do it in this gallery: https://www.fernandacortina.com/limited-editions for the grid itself, but on another page I want this same effect inside of the Lightbox only. I already have another hover effect for the grid in place. The page I need help with is: https://www.fernandacortina.com/gallery I've tried a couple of snippets of CSS but none of them have worked except to place an image on top of the Lightbox, but can't figure out how to get the hover effect and how to get that image overlay to repeat so it covers the whole image.
-
Hey, Is it possible to have an image overlay so that it changes the image on hover? From what I can tell it is not possible with Masonry Grid. I have 30+ images on the page that I want to have a rollover on. Many thank in advance!
-
Hi, i would like your help with this problem: Idea: I want headline over image. Sometimes there is contrast problem so i decided to use Exclusion blending mode. It works fine when headline is white, background behind type black, blending mode Exclusion. The effect looks exactly how i want since i want it to be clean but little edgy. Problem: everything works fine but there is a "bug" with original white type and black background appearing for a moment before blending mode takes effect. I need to figure out a way to achieve this kind of effect without the blending delay. I have attached video so you know what I'm talking about. Web: https://blue-oleander-b4f7.squarespace.com/workshop Pass: demoerror headline-effect.mov
-
Hi, , I've run into an issue on mobile. The pages move side to side in blog posts. Could someone help with this? RPReplay_Final1711986883.mp4
-
@tuanphan @Ziggy I have this section on most of my pages (appears 12 times) that will link to other various pages on the website. The look I am trying to go for an overlay that appears on hover and to remove the underline from the links in this section only where the 8 image blocks are. It would be great if instead the links had a different color when hover (so create the look of a whole block overlay). The orange is #E88B2C which might be good for the link hover. I found some CSS in another thread that works for my website but the result is EVERY image now has an overlay on hover. 😂 Can you help me edit the CSS so I can create what I want it to be? website is https://cat-trout-7kzz.squarespace.com/ PW : jeffreylaimd
-
Hi! Trying to use custom css to add a hover over effect on a masonary grid gallery. Everything working ace EXCEPT, when the caption copy runs over to two lines, it changes from center to left align 😞 Here's the code - any ideas? I can't add any code to head tag as the subscription level my friend has isn't high enough. /* gallery Hover effect */ figure.gallery-masonry-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; font-size: 30px !important; color: #FFFFFF; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: #000000; /* 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; }
-
Cursor change to indicate link when hovering over image
hwa630 posted a topic in Customize with code
Hi. I'm looking to indicate to people visiting our website that some images are clickable. I've added urls but there's no option to add anything to indicate that the link exists, like an overlay when you hover over an image or title. I'd love to have the cursor change to indicate if something is a link and can be clicked. Just like most cursors change to indicate when a field is typable. Has anyone added code like this before? Thanks for any help! -
I have a black logo on my website which I managed to invert to white on the home page, with help from other threads in this forum. Works great with the slideshow, the only problem is on the mobile version. When I access the burger menu (which is white) from the homepage, the logo looks weird/semi-transparent. If I access it from the other pages on the site, it's black, which looks better. See screenshots below The CSS code I used for inverting the logo on the homepage is the following: body[class*="home"] header#header img { filter: invert(1) !important; -webkit-filter: invert(1); }
-
portfolio 7.1 site mobile view on portfolio page hover overlay text does not appear whatsoever - I really need this text title to display on touch screens mobiles upon scrolling or selecting -how may i fix this? please take a peek at the portfolio page on any mobile view www.nadinenorman.com/artwork sincere thks to anybody who may be of help - nadine -
I'm looking to mimic the function of a portfolio grid overlay to just one stand-alone image. I need the image to overlay with text when you hover over it. I think this was possible before Fluid Engine. Please advise.
-
Hey, Is it possible to have an image overlay so that it changes the image on hover? From what I can tell it is not possible with Masonry Grid. I have 30+ images on the page that I want to have a rollover on. Many thank in advance! https://www.nickbarr.co/
-
I have added custom code to a page (https://www.inlifewellness.com.au/burwood) and this code works perfectly fine however the display of the "pricing" button overlaps the code once "view locations" is clicked. I have attached a photo for reference. Does anyone know why this is happening? I should note that this only happens on 50% of the devices I've tested the site on.
-
Hey there. I was just playing around with the updated tools and trying out overlaying text on an image or shape box. It seems to work great on desktop and as it resizes down until it gets to mobile size. In the mobile preview, the text gets moved below the object. Has anyone else run into this or have a solve? I was trying to use the built-in tools, not code, but open to all responses. Thanks all!
-
Hey there, I currently have css that allows a smooth scrolling overlay on the homepage. It works great! But I need the scroll over to be transparent. I want the first section stuck in place (which it is) and the rest of the sections that scroll over it, need to be transparent so that I can see that first section in the background. How do I achieve this? This is the current css I have in place: section[data-section-id="65ca978295d71019eda39c64"] > * { background-color: transparent; color:transparent !important; } #page .page-section {position: sticky!important; top: 0px} html {scroll-behavior: smooth}
-
I am looking to add 4K video to the background of my home page...is there custom css which would allow me to add a "bring to front" function to the header? I hope to overlay the header onto a video block so that my video can extend to the top of the webpage and appear behind buttons and titles.
-
I want to add images to my homepage, when you hover over them I'd like them to have a dark overlay and a hyperlinked text to pop up with the location name. I have seen similar posts asking questions about this, but none that seem to fit this specific request. Any and all help is greatly appreciated!
-
Hi there! Could someone please help me with a css code for my Avenue template. I would like for the thumbnail titles to work as a hover overlay per index image, but have the thumbnail title underneath the image instead of in/on it. Earlier I had received this code from @tuanphan /* Test something */ .index-thumb-title-position-overlay #projectThumbs .project .project-title { transform: unset !important; opacity: 1 !important; top: unset !important; bottom: unset !important; color: black !important; margin-top: 5px; } a.project { overflow: visible !important; } This did do the trick for having the thumbnail title underneath the image without it adding additional padding space underneath, but the hover action is not working here, neither is it perfectly centered per image. Does anyone know what to add/substract from the code to make it work like a 'centered fading/showing when hovering' title underneath each project image. Thank You in advance! -
I was hoping someone could come up with a code to do the following: make the captions appear on a gallery slideshow: reel images, on hover each image should zoom in, the text should appear and I also want the image to have an overlay effect on hover. If possible, when this is done, I would like the blank space where the captions were to be deleted. I got this code so far: /* Common styles for captions */ .gallery-caption { margin-top: -80%; opacity: 0; visibility: hidden; transition-duration: 0.3s; } /* Hover effect to show captions */ .gallery-reel-item:hover .gallery-caption { opacity: 1; visibility: visible; } /* Caption font styles */ .gallery-reel-list p.gallery-caption-content { font-size: 3em !important; font-family: Poppins; font-weight: 450; } /* Middle image's caption style */ .gallery-reel-item-middle .gallery-caption { opacity: 0; visibility: hidden; } /* Hover effect for middle image's caption */ .gallery-reel-item-middle:hover .gallery-caption { opacity: 1; visibility: visible; } It has some flaws as I've gotten it from communicating with ChatGPT. (This code works almost as intended, I just would like the middle image of the slideshow to not have text present unless I hover on it and also I'd like the overlay effect and the blank space disappear as I've mentioned). I want the section to look something like the section from this website: https://demo.goodlayers.com/arki/minimal/home-the-studio/ my website: https://lettuce-tarpon-hpp4.squarespace.com/ pass: mac123 Thank you in advance!
-
I am using the following code to round the corners of my portfolio thumbnails. /* Round corners portfolio items */ body.homepage a.grid-item, body.homepage .grid-image { border-radius: 10px; } I am using a grid:overlay. When I hover over the thumbnails the overlay is not filleted. Any suggestions on how to fix this? -
Hi there! I'm trying to have an overlay appear on images during a hover. I've researched various code, but I'm not sure if I have the wrong selectors or id blacks or just the wrong code. I'm very much a CSS beginner. I'm guessing that if I'm putting the code in the Custom CSS section of the site and I only want this hover effect on the images ONE page of the site, that I should use the IDs rather than selectors, correct? I've tried all the IDs that seem to be related to the one image I have on the page with no luck. Any help is much appreciated. This is current unlinked page: https://www.christinewrightphoto.com/slideshow Right now there is only one image but there will be more and I'd like the hover effect on all of them. Many thanks in advance!
-
Hi there! I applied an overlay scroll effect on my website. However, for some of the pages the section is getting cut-off or lagging when you scroll down. Is this something you would be able to help with? Looking forward to hearing from you!
