Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

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!


Learning something new everyday

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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);
}



Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

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);
}

 

 


Learning something new everyday

Share this post


Link to post
  • 0
.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);
  }
}

 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...