README.md

Hover Effects ✨

Hover Effects can be added to various components of a web page making it more engaging and visually appealing. They also help the users to easily navigate through the website therefore improving their experience.

Here is a collection of subtle yet attractive hover effects examples for you!

• Button Border Fill Up
• Button Stripes
• Image Shrink
• Team Card
• Share Button Hover Effect
• Text Underline Hover Effect
• Focus Image on Hover Effect
• Button Background Rotate Hover Effect
• Button Wave Animation
• Card Hover Effect
• Multi-line Underline Hover Effect
• Link Slide Up Hover Effect
• Book Flip Hover Effect

Button Border Fill Up Hover Effect ⚡

A Button Border Fill Up Hover Effect made using svgs and CSS properties to animate them!

📎 View code here.

Button Stripes Hover Effect ⚡

A Button Stripes Hover Effect made using pseudo elements and CSS gradient properties!

📎 View code here.

Image Shrink Hover Effect ⚡

An Image Shrink Hover Effect made using CSS transform properties to scale down its size and show image title when hovered!

📎 View code here.

Team Card Hover Effect ⚡

A Team Card Hover Effect made using CSS transform properties to scale down the profile image's size and show further details when hovered!

📎 View code here.

Share Button Hover Effect ⚡

A Share Button showing all social icons when hovered over! Fontawesome is used for the icons.
📎 View code here.

Text Underline Hover Effect ⚡

A Text Underline Hover Effect made with pseudo element where its left position and width are changed on hover!
📎 View code here.

Focus Image on Hover Effect ⚡

An Image Hover Effect where an image being hovered is highlighted and rest are blurred! Made using CSS :not selector and opacity property
📎 View code here.

Button Background Rotate Hover Effect ⚡

A Button Hover Effect made using CSS transform and z-index properties on pseudo elements!
📎 View code here.

Button Wave Animation ⚡

A Button Wave Animation made using CSS transform and z-index properties on pseudo elements!
📎 View code here.

Card Hover Effect ⚡

A Card Hover Effect when the image zooms in and a white background fills behind the content, also changing content's color!
📎 View code here.

Multi-line Underline Hover Effect ⚡

A Multi-line Underline Hover Effect made using CSS background and transition properties!
📎 View code here.

Link Slide Up Hover Effect ⚡

A Link Slide Up Hover Effect made using CSS transform property on pseudo elements !
📎 View code here.

Book Flip Hover Effect ⚡

A Book Flip Hover Effect made using CSS transform property! CSS variables are used to define different rotation angles and duration for each page.
📎 View code here.