Hover Text Tuyệt Đẹp Bằng CSS Cho Blogspot

Xin chào các bạn, hôm nay mình sẽ chia sẻ nhanh cho các bạn hiệu ứng thú vị khi rê chuột vào Text.
Bắt đầu luôn nhỉ ^^

Dưới đây là đoạn code:

<div class="middle">
<span class="container">
<div class="text" data-text="DESBLOG">DESBLOG/div>
</span>
</div>

Nhớ đổi chữ DESBLOG nhé
Còn đây là phần CSS

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.container{
  position: relative;
  display: inline-block;
  padding: 0 40px;
  cursor: pointer;
}
.text{
  font-size: 100px;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  color: #34495e;
}
.text::before{
  content: attr(data-text);
  position: absolute;
  color: #fff;
  width: 0;
  overflow: hidden;
  transition: 0.6s;
}
.container::before{
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  background: #2980b9;
  right: 0;
  top: 0;
  transition: 0.6s;
}
.container:hover .text::before,
.container:hover::before{
  width: 100%;
}

Chúc các bạn thành công ! Nếu có Code bị lỗi hay Comment để mình xem lại nhé !