Can't get images to bleed the whole screen + grayscale hover with mouse + overlay two images on top

Site URL: https://juliennecarrots.squarespace.com

Site URL: https://juliennecarrots.squarespace.com
Site password: Password

Hi there,

I need help trying to achieve a few different things.

I'm currently working on a split landing page for my website, in order to choose which half of the website to visit.

Here's what I'm having trouble doing:

1.  I'm trying to have two images bleed to the extents of the page. I've got them as image blocks side by side, but right now there's still space between the images and around them. I'm trying to have them be right next to one another, and fill the extents of the screen. (The images of the ladies are the ones wanted in the background)
2. I'm trying to have the images be in grayscale, but then revert to color when the mouse is hovering on them. Below (the list) is the CSS I'm using to try to achieve this, but with no success.
3. I also want two other images (the two logos) to be overlayed over the background images, and act as link buttons that bring you to the respective split homepages. I have the link/button functions working fine, but I can't seem to figure out how to overlay these logos over the two images below that I want in the background. Also, I can't seem to find a way to change the sizing of these images. I'd like them at about 50% of what they are now.

Custom CSS for grayscale to color hover: 

#block-yui_3_17_2_1_1636006346935_2766 {

  transition: .5s ease-in-out; 

  filter: grayscale(1);

}

.image-block img:hover { 

  filter: none;

}

#block-yui_3_17_2_1_1636006105660_3251 {

  transition: .5s ease-in-out; 

  filter: grayscale(1);

}

.image-block img:hover { 

  filter: none;

}

I would love help figuring these things out.

Thank you so much!

I really appreciate it.

Hi,

With this case, I will add 2 sections (it will be top/bottom), add background image, add 2 images block.

Then let me know. We will give the code to make 2 sections side by side to achieve your request.

On 11/11/2021 at 4:13 AM, tuanphan said:

Hi,

With this case, I will add 2 sections (it will be top/bottom), add background image, add 2 images block.

Then let me know. We will give the code to make 2 sections side by side to achieve your request.

Thanks for replying!

I did what you said to (I think). 2 sections, one on top of the other, with the background images and the corresponding image blocks.

Let me know what the next step is! 🙂

On 11/13/2021 at 6:37 AM, Julienne said:

Thanks for replying!

I did what you said to (I think). 2 sections, one on top of the other, with the background images and the corresponding image blocks.

Let me know what the next step is! 🙂

Add to Design > Custom CSS

body.homepage article section {
    width: 50% !important;
    float: left !important;
    height: 200vh;
}

20 hours ago, tuanphan said:

Add to Design > Custom CSS

body.homepage article section {
    width: 50% !important;
    float: left !important;
    height: 200vh;
}

 

That worked, thank you so much!!

Do you know of a way I could get the background images to be grayscale, and fade into color when the mouse is hovering?

I found this CSS code online:

#block-yui_3_17_2_1_1636006346935_2766 {

  transition: .5s ease-in-out; 

  filter: grayscale(1);

}

.image-block img:hover { 

  filter: none;

}

But it only makes the images grayscale, and it doesn't seem to make the hover into color work.

Also, what do I put instead of #block-yui if it's for a background image. I don't want the whole section to be grayscale, only the background image.

On 11/16/2021 at 6:24 AM, Julienne said:

That worked, thank you so much!!

Do you know of a way I could get the background images to be grayscale, and fade into color when the mouse is hovering?

 

I found this CSS code online:

#block-yui_3_17_2_1_1636006346935_2766 {

  transition: .5s ease-in-out; 

  filter: grayscale(1);

}

.image-block img:hover { 

  filter: none;

}

But it only makes the images grayscale, and it doesn't seem to make the hover into color work.

Also, what do I put instead of #block-yui if it's for a background image. I don't want the whole section to be grayscale, only the background image.

try

#block-yui_3_17_2_1_1636006346935_2766 {

  transition: .5s ease-in-out; 

  filter: grayscale(1);

}

.image-block:hover { 
  filter: grayscale(0) !important;
}