abigailryan

@TheSquareSpacer The password is: pineapple

I was also wondering if it would be possible to overlay text over the gallery blocks on each section? It being built in classic editor means I can't do this within squarespace, but I would like to- so that visitors know which side to click on 😄

Hi @tuanphan, It's the landing page: https://jenniferirelandmakeup.squarespace.com/landing

Hello! Thanks to @tuanphan I have a very beautiful split screen landing page on my current project, created with the page header injection code: <style> header#header, footer.sections { display: none !important; } section { width: 50% !important; float: left !important; height: 100vh !important; min-height: unset !important; } .sqs-gallery-design-stacked {height:100vh !important;} .content-wrapper { padding: 0px !important; } .gallery-block { padding: 0px !important; } body { overflow-x: hidden !important; overflow-y: hidden !important; } img.tp-img { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999; max-width: 250px; } What I would like to do now is make it so that, on tablet and mobile, rather than being side by side, the two gallery slideshows are stacked, with the logo in the middle (but smaller, of course!), and with the white text still visible... Is there a way to do this, or do I need to code it so that this code only applies to sizes larger than tablet? To have a look at the site, the code is 'pineapple'. Thanks so much 🙂

@Beyondspace Thanks for this, but i've tried all the options within SS, and i'm pretty sure i'll need some CSS. I really appreciate your reply, though, and i'll definitely try it out- just in case I managed to miss it! 😄

Anyone have any further thoughts on this? I'm completely stumped!

Thanks for replying 🙂 I have tried that, and no joy. It looks like the image fills the space when viewed on a large screen, but, as soon as I resize the screen I get a massive white area at the bottom of the block.

Hello! I've been struggling with this for hours now and I just can't get it to work. I've tried custom css, and page header code injections, but nothing will get rid of the extra space between the gallery slideshow block and the footer on this page: https://jenniferirelandmakeup.squarespace.com/dmk/home (the code is "pineapple") What I need is for the image to fill whatever available space there is, even if it means the image being cropped. I've tried the 'object-fit' property, and playing about with overflow hidden, but I can't get it to work. The most infuriating thing is that it's working on this page (https://jenniferirelandmakeup.squarespace.com/jimua/home ) and I have absolutely no idea why- I have looked at every single thing it could possibly be to match the settings, and it's just not working! Does anyone have any suggestions? Thank you all so much in advance 😄 Abigail

This is EXACTLY the look i'm trying to achieve, too- a two image, full width, split screen, with roll-over effect and text overlay. Would you or Tuan mind sharing the code you used? The site i'm working on isn't published yet, so I don't have a link to share. I have used some code that Tuan gave me to remove the header and footer- it removed the header, but hasn't completely removed the footer: <style> header#header, footer.sections { display: none !important; } </style> Thanks so much in advance 🙂 Any help is much appreciated!

This worked perfectly- thank you so much!

Hi tuan, The password is: pineapple On the front page, the top image uses the second bit of code (where it works as a link, but is cropping the image), and the second lot of images (four in total) use the first bit of code- the rollover works perfectly, but they aren't links. Thank you so much for having a look 🙂

Site URL: http://underthelaureltree.squarespace.com Hello everyone, I've used some code I found online to create a hover effect that changes one image to another in an image block. I used the css version, rather than the "onmouseover" version, as I wanted a smooth fade transition (which I read couldn't be done with the "onmouseover" version of the code). Now, though, when I use the Squarespace editor to make the image block a link, it doesn't work- presumably cancelled out by the rollover effect. Is there any this I can add to the code below to make the image a clickthough link to another page on the site? I've seen lots of versions using "a/ref", but, as i'm using image blocks, and not code blocks, I don't know how to make this work- where it would go, etc. This is the code i'm using- there may be bits I don't need and could be removed- I just played with it until it did what I needed and this is what I ended up with! I also have four images with the same effect on the same page, and need them all to behave the same way and link to different pages- i've used this code 4 times (with different block ids and different image urls), is this correct, or is there a way to condense it? #image block id { figure:before { content:''; } &:hover figure:before{ content: ''; } figure:after{ background-image: url(custom css image url); } figure:before { content:''; position:absolute; z-index:1; bottom:0; right:0; } figure:after{ content: ''; position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; opacity:0; transition: opacity .5s ease; } &:hover figure:after{ opacity:1; } I have also tried this code: /* hide image on hover */ div#block-id a:hover img { opacity: 0; } div#block-id a img { transition: all ease-in-out 0.9s; opacity: 1; } /* Set new image */ div#block-id a { background-image: url(custom image url); background-size: cover; display: block; } This code works, too, and doesn't seem to stop the link working (yay!)- however, it is resizing the images... They are being stretched hugely, then being cropped- so I can only see part of them (I hope that makes sense!) Thanks so much for any help 🙂 ryan