A couple of tutorials for direction-aware CSS-only hover effects.
These tutorials are intended for people who have at least a basic knowledge of HTML and are proficient to advanced in CSS/SASS.
These effects do not work in older browsers — you will need a browser capable of rendering 3D transforms. I’ve tested in the latest versions of Chrome, Firefox, and Safari.
I also use the amazing AutoPrefixer instead of vendor prefixes. If you’re using CodePen, make sure to go to your pen’s settings, click on CSS, and select AutoPrefixer.