How to Make a Nice Hover Effect With CSS

Transition animation in CSS (Cascading Style Sheets) to fuel your HTML components

This is where the fun begins when playing with some CSS properties. In any website front-end web development project that you have, you always have the parts that you want to have nice any good looking animation and transition effects.

Photo by Tyler Lastovich on Unsplash

CSS Transition has always been fun to use in making of web pages look cool and attractive. Any components in your website such as buttons, links, or cards can have animation effects.

There are several CSS transition property that can make your website looks cool. Transition can take almost other CSS properties that you want to animate such as opacity, background color, transform, and other properties. See this great explanatory post from Sara Cope about Transition Properties.

I will take you on two things I want to introduce into animating transitions. Buttons and Cards are popular HTML components that are widely used on websites.

1. Buttons

We can start with writing the HTML buttons to the canvas. You can use your own CSS style for the projects or use a CSS framework that you like. I use the Bootstrap 4 framework for this case.

HTML Setup:

HTML tags for Animation and Transitions

SCSS Setup:

Code snippets on SCSS animation and transitions

Result of how to transition animation on button hover

CodePen result on Button hover transition animation

2. Cards

First thing, we use default Bootstrap cards and extend CSS transition animation on top of it, and lastly, we add some new transition animation.

The Cards SCSS:

SCSS for animation and transition on Cards HTML tags

The Cards HTML:

Cards HTML Tags with animation and transitions

We can continue with animating transitions on cards with ::before Pseudo-class elements. Using before property animation with transform transition:

The SCSS:

Using css ::before property for animation and transitions on HTML tags

The HTML:

HTML Cards tags using CSS ::before on animation and transitions

The CSS animation and transition effects will take on the start of the mouse hover and mouse out of the cards. The smooth transition can be changed in the CSS transition property. The more you change the CSS animation transition properties, the more you understand how the effect works.

Result of how to transition animation on cards

CodePen on cards animation

And lastly, we could use some modifications on the cards animate with CSS transform perspective property:

The SCSS :

SCSS Cards transform on CSS animation and transition

The result of perspective transition CSS animation

CodePen on cards perspective transition animation

Thank you for stopping by. This is one of my series about SCSS with Bootstrap and happy coding!

References :
https://sass-lang.com/
Sara Cope — https://css-tricks.com/almanac/properties/t/transition/

Read Also:

OnLine and OffLine Detection Web navigator API using VueJS

Consider These 11 Useful Modules in Your Nuxt.js

How to Change Node.js Version Between Projects Using NVM

Closing

Please do follow me to get more tips and tricks from web development, thank you!

Join Medium with my referral link — Code Road