CSS

In this CSS tutorial we will create a region / box that will have animated border bottom on mouse hover. The animation will start from center and will move to left and right directions. And when the mouse hover is removed the border will shrink back to center in the same way.

You can use this technique to style your services, projects, features etc. boxes.

Create a box

Let's first create a simple box using HTML and basic CSS.

HTML

In this CSS tutorial we will create a cool service / feature box using CSS. The box will have a left scrolling border on hover.

HTML

Let's first create a simple service box.

CSS reset is the first thing I add in my css file in any web development project. I have been using necolas Normalize.css for years. But now modern browsers are much smarter.

Below is my own css reset inspired by Andy Bell's Modern CSS Reset.