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; } |
Preview
This is how the service box / feature box will appear.