Jump to content

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

Recommended Posts

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.

Link to comment
  • Replies 5
  • Views 988
  • Created
  • Last Reply

Top Posters In This Topic

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! 🙂

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.