DIV Hover Generator

Preview

Hover me!

Generated HTML

1
2<div class="hover-div">
3  Hover me!
4</div>
5

Generated CSS

1
2.hover-div {
3  background-color: #3b82f6;
4  color: #ffffff;
5  border-radius: 4px;
6  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
7  transform: none;
8  width: 200px;
9  height: 100px;
10  transition: all 0.3s ease;
11}
12
13.hover-div:hover {
14  background-color: #2563eb;
15  color: #ffffff;
16  border-radius: 8px;
17  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18  transform: scale(1.05);
19  width: 200px;
20  height: 100px;
21}
22