Side Expand List Hover Animation | CSS Solid Border & Before/After | HTML/CSS/SASS Tutorial | #12
In this hover effect we will be creating a border split and side expand effect. In this we will be using solid border along with css :before and after. We will also be using css keyframes animation and along with the css transition to acheive our goal of fade and expanding the borders.
We will also be using position absolute and relative to properly position our list item pseudo classes so that we can have our desired result. Finaly we will also be adding fading transitions with help of opacity and transition to have a subtle fade with split expand transition.
These effects are subtle and simple and can be used in various location.
You can find the source code for this project below:
https://github.com/thebingecoder/Slid...
Package includes all html and complete SASS & CSS code. Feel free to use it as you see fit.
!!!! If you liked the video subscribe & hit the like button !!!!