Make image slowly fade in once you enter home page only

Site URL: https://caper-badger-3s6d.squarespace.com/home

Password: home

I want to make this image (picture below) slowly fade in (once the page is entered) on home page only.

Can anyone help me?

Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want.

.homepage #block-yui_3_17_2_1_1611067680935_4040 {
	animation: fade-me-in 1.5s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}

@colin.irwin Thank you, that worked great!

Is there a code to do this to Fade Out after a few seconds one the page loads?  I tried messing around with the above shared code using "fade-me-in" and it works but then after the time set at any time frame, the pic will fade as planned, and the pop back up.  I'd like once it fades is stays faded away to 0 until the page is reloaded.  

On 10/6/2023 at 1:27 AM, Turbiville said:

Is there a code to do this to Fade Out after a few seconds one the page loads?  I tried messing around with the above shared code using "fade-me-in" and it works but then after the time set at any time frame, the pic will fade as planned, and the pop back up.  I'd like once it fades is stays faded away to 0 until the page is reloaded.  

Can you share link to page where you have problem? We can take a look easier

12 hours ago, tuanphan said:

Can you share link to page where you have problem? We can take a look easier

Sure!  https://www.christurbiville.com

For now I'm just using a hover over the main headshot pic at the top of the page that is over the video background.  Hover and it fades to zero over 2 seconds, and then fades back up if you move away.  I'd like it to just fade away on page load after about 6 seconds and not come back up unless the page is reloaded.  

Thanks!