How to create image hover animation effects using only CSS
This video shows how to create different animation effects after hovering your mouse on an image. I used only HTML and CSS for these examples.
🌟 You can find further explanations in my blog post: https://shihabiiuc.com/image-hover-an...
🌟 See the live preview: https://shihabiiuc.github.io/image-ho...
🌟 Download the template: https://github.com/shihabiiuc/image-h...
🌲 If you need to hire me for any web development projects: https://shihabiiuc.com/contact
00:00 Demo of the final template
00:53 Basic style and alignment
03:09 Position text over image
05:27 Adding overlay background between image & text
08:17 Cropping images in a proportion using CSS
10:55 Adding hover effects
12:50 Fade in and blur effect (example 1)
15:00 Zoom in effect (example 2)
15:58 Slide left animation (example 3)
17:50 Slide right (example 4)
18:28 Slide up (example 5)
19:27 Slide down (example 6)
20:27 Grayscale (example 7)