Pinch Zoom List Hover Animation | CSS Dotted Border & Before/After | HTML/CSS/SASS Tutorial | #11
In this hover effect we are going to use dotted borders to create a pinch zoom like hover effect on list items. We will be creating dotted borders on before and after pseudo elements / classes.
Then we will be using 3 steps keyframe animation to create an effect which simullate pinch zoom like focus on hovered over list item. For this we will be having two different border set of top let border and bottom right border.
We will be using position absolute and relative to create this effect. Also we will be using css transform with translateX to animate our before and after elements.
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 !!!!