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: