How to Create Boxes with a Distinct Hover Effect


When utilizing cards or boxes, it’s helpful to create a hover effect that gives the allusion of depth so as to better indicate to the user that they are on a clickable item.

How to Create Boxes with a Distinct Hover Effect

Boxes and cards are a great way to organize and display information. With hover effects, you can create so many different and original designs for those boxes.

Previously, we wrote about creating service boxes using Bootstrap cards and hover effects. If you'd like to utilize cards as links to other pages, using hover effects to create depth is a good way to convey that they're clickable. In this tutorial, we'll show you how to build cards/boxes and create a nice hover effect.

Getting Started

Copy and paste the external Bootstrap stylesheet link into the head section in your project:

HTML

Below, we have three cards. Each card container has a classname of .card which is a Bootstrap content container. Cards are very plain with as little markup as possible but they're highly customizable. Bootstrap cards are also built with flexbox so we can take care of their size and alignment by adding built-in Bootstrap classes in the HTML code and use minimal CSS. There are two classes added to each card. These are .box-shadow-hover and .pointer. We will select these classes to add the box shadow effect on hover and change the cursor. Adding these classes is optional, as you can simply choose the .card class to add the hover effect but it is much more practical.

CSS

The bulk of the work is done with the HTML so the CSS is pretty straightforward. We select the .box-shadow-hover class, add a :hover property to create a box shadow and then we select the .pointer class to change the cursor from the default arrow to pointer so that the users can tell the cards are links when they hover their mouse over the cards.

And there it is! Check out the JSFiddle below and hover over the cards before committing to its use:

Author

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.