justin_phang Posted June 14, 2020 Share Posted June 14, 2020 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 Link to comment
RyanDejaegher Posted June 14, 2020 Share Posted June 14, 2020 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); } CleanShot 2020-06-14 at 12.18.04.mp4 justin_phang 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
justin_phang Posted June 16, 2020 Author Share Posted June 16, 2020 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); } CleanShot 2020-06-14 at 12.18.04.mp4 14.23 MB · 0 downloads 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); } CleanShot 2020-06-14 at 12.18.04.mp4 14.23 MB · 0 downloads Learning something new everyday Link to comment
RyanDejaegher Posted June 16, 2020 Share Posted June 16, 2020 @justin_phang like this? CleanShot 2020-06-16 at 10.24.37.mp4 justin_phang 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
justin_phang Posted June 20, 2020 Author Share Posted June 20, 2020 On 6/16/2020 at 10:25 PM, RyanDejaegher said: @justin_phang like this? CleanShot 2020-06-16 at 10.24.37.mp4 Exactly! How is it achieved? This looks perfect Learning something new everyday Link to comment
RyanDejaegher Posted June 22, 2020 Share Posted June 22, 2020 .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); } } justin_phang 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment