Give your visitors additional information without compromising on sleek visual design by using these service boxes with text hovers.
Boxes or cards are a great way to organize and display information. You can show more information about your services by using boxes with a hover feature. And as we've pointed out in previous blog posts, engaging visual elements can help reduce the bounce rate of a page by keeping your visitors involved with your content for longer.
We start by creating a section to group our boxes' content. Inside the section, the code follows the Bootstrap grid system which is made up of rows and columns. Here's an example (three-column) grid system in Bootstrap:
In this example, we're using a three-column grid. Our first container is a 12 column introductory text that takes up the whole width of the section:
We put three more containers to place our three boxes. Inside each div with a class of "col-xl-4 col-sm-6", there are two div containers inside. The first one with a class of "box-lunar" is the front of our box while the second div container with a class of "box-hover" is the back of our box so basically, our main "col-xl-4 col-sm-6" container is one box that contains the code for the both sides of our box.
Once we're done with our HTML code, we do our layout and styling with CSS. First, we hide the back of our box so that we don't see both the front and the back of the box at the same time. In order to do that, we set the box-hover container to "display: none" then we use the CSS hover selector to activate the box transition when a mouse hovers over the box and finally set the display to flex on hover so that when a mouse hovers over the box, our box is no longer hidden:
Here's the complete CSS: