Service Box with Scrolling Border On Hover using CSS

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.

1
2
3
4
5

<div class="box">
<h3>Box Header</h3>
<p class="sub-heading">Sub heading text goes here</p>
<div class="box-content">Lorem epsum some dummy text goes here as description of the box</div>
</div>

Add basic CSS to box

1
2
3
4
5
6
7
8
9
10
11
12
13

.box {
position: relative;
background: white;
color: #222;
width: 300px;
height: 200px;
text-align: center;
padding: 20px;
transition: all 0.4s ease;
}
.sub-heading {
margin-bottom: 30px;
}

Add a before element to the box

We will use this to make a scroll like effect.

1
2
3
4
5
6
7
8
9
10

.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 70px;
background: white;
transition: all 0.4s linear;
}

Add Hover Effect

Now add these CSS hover effect to the box and ::before element.

1
2
3
4
5
6
7
8
9

.box:hover {
background: tomato;
color: white;
border-radius: 6px;
box-shadow: 4px 4px 4px #868686;
}
.box:hover:before {
top: 80px;
}

Final Code

This is the final CSS code for this cool service box.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.box {
position: relative;
background:white;
color: #222;
width: 300px;
height: 200px;
text-align: center;
padding: 20px;
transition: all 0.4s ease;
}
.sub-heading {
margin-bottom: 30px;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 70px;
background: white;
transition: all 0.4s linear;
}
.box:hover {
background: tomato;
color: white;
border-radius: 6px;
box-shadow: 4px 4px 4px #868686;
}
.box:hover:before {
top: 80px;
}