Hover animation on Index Page

Site URL: https://www.justinphang.com/

Hey there peeps!

Here's my website https://www.justinphang.com/ in Lange Template

I'm a total beginner in CSS and I've been searching everywhere in the forums and Google to no avail of the effect I'm trying to achieve.

I'm trying to add hover animation to the pictures in the homepage. It is an Index page. The animation I'm looking at is a slight scale of 1.1 when the mouse cursor is hovering the pictures and the rest of the pictures are slightly blurred, also trying to achieved a slight drop shadow at the hovered picture too.

If it's not too much to ask, I'm trying to add animation for the main navigation (Weekdays, weekends and week-long) so that they fade-in appear one by one after the main picture is loaded. But this appearing animation only applies to the homepage. Is it possible?

Thanks in advance!

Hey @justin_phang is this the effect you're going for? If so you can add this to your custom CSS

 

[id*='index-section']:hover img {
    transform: scale(1.1);
    transition: all .3s ease;

}
[id*='index-section'] img {
    transition: all .3s ease;
    filter: blur(0px);
}

[id*='index-section']:not(:hover) img{
    filter: blur(4px);
}

.index-list:not(:hover) [id*='index-section'] img {
    filter: blur(0px);
}

Yes! Thank you so much Ryan! Exactly how I wish it. Thank you.

Any chance you would be able to help me with this too? I'm trying to add animation for the main navigation (Weekdays, weekends and week-long) so that they fade-in appear one by one after the main picture is loaded. But this appearing animation only applies to the homepage. Is it possible?

On 6/15/2020 at 12:19 AM, RyanDejaegher said:

 

 

On 6/15/2020 at 12:19 AM, RyanDejaegher said:

Hey @justin_phang is this the effect you're going for? If so you can add this to your custom CSS

 

[id*='index-section']:hover img {
    transform: scale(1.1);
    transition: all .3s ease;

}
[id*='index-section'] img {
    transition: all .3s ease;
    filter: blur(0px);
}

[id*='index-section']:not(:hover) img{
    filter: blur(4px);
}

.index-list:not(:hover) [id*='index-section'] img {
    filter: blur(0px);
}

 

On 6/15/2020 at 12:19 AM, RyanDejaegher said:

Hey @justin_phang is this the effect you're going for? If so you can add this to your custom CSS

 

[id*='index-section']:hover img {
    transform: scale(1.1);
    transition: all .3s ease;

}
[id*='index-section'] img {
    transition: all .3s ease;
    filter: blur(0px);
}

[id*='index-section']:not(:hover) img{
    filter: blur(4px);
}

.index-list:not(:hover) [id*='index-section'] img {
    filter: blur(0px);
}

 

@justin_phang like this?

On 6/16/2020 at 10:25 PM, RyanDejaegher said:

@justin_phang like this?

Exactly! How is it achieved? This looks perfect

.site-navigation .nav-item:nth-of-type(1) {
    opacity: 0;
  animation: fader .5s ease 0.2s;
    animation-fill-mode: forwards;
}
.site-navigation .nav-item:nth-of-type(2) {
    opacity: 0;
  animation: fader .5s ease 0.3s;
  animation-fill-mode: forwards;
}
.site-navigation .nav-item:nth-of-type(3) {
    opacity: 0;
  animation: fader .5s ease-in-out 0.4s;
  animation-fill-mode: forwards;
}

@keyframes fader {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}