Hiệu Ứng Hover Effect viết bằng CSS đẹp mắt

views

A+A-

PrintEmail

Bài viết này, LaiXe.Xyz chia sẻ đến các bạn để thực hiện một hiệu ứng Hover tuyệt đẹp. Và các bạn chỉ cần thực hiện điều này bằng CSS

Demo

File ảnh Gif

Các bước hướng dẫn thực hiện hiệu ứng hover này
Bước 1: Thêm code HTML

<div class="Project">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiILLkgaOnzuWdZsaDaVMrxwJmi56hL3egqUMLAtOOAuVFUvNAYmXts8Cg7hMQWr_CvTOZMnPa7Mv6GRSjDbKdO3Gi5InLqMHcWEq4qbhudlY8Zta7Eft3DdPvke2JPsHmbO68i6uMRCmp/s320/tumblr_n8bsno0htg1qmzbpoo1_1280.gif" alt="" class="imgMasked" />
  <div class="Project-hail"></div>
  <div class="Project-hail2"></div>
  <p class="Project-name">LaiXe.Xyz</p>
</div>

Bước 2: Thêm CSS

body,
html {
  overflow: hidden;
  background-color: #fdf0d5;
  margin: 0;
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.Project {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.Project:hover .imgMasked {
  -webkit-clip-path: circle(100px at center);
          clip-path: circle(100px at center);
}
.Project:hover .Project-hail {
  width: 200px;
  height: 200px;
  border-radius: 200px;
}
.Project:hover .Project-hail2 {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  border: 80px solid #fff4e6;
  opacity: 0;
}
.Project:hover .Project-name {
  left: 200%;
  opacity: 1;
}
.Project:hover .Project-name:before {
  width: 100%;
}
.Project-hail {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #f0544f;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0.2;
}
.Project-hail2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 0;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  border: 22px solid #f0544f;
  border-radius: 20px;
  pointer-events: none;
}
.imgMasked {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  height: 200px;
  -webkit-clip-path: circle(20px at center);
          clip-path: circle(20px at center);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  pointer-events: none;
}
.Project-name {
  position: absolute;
  max-width: 600px;
  min-width: 150px;
  left: 0;
  top: 150%;
  pointer-events: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #000;
  padding: 3px 6px;
  z-index: 2;
  opacity: 0;
}
.Project-name:before {
  content: '';
  width: 0;
  height: 100%;
  background-color: #f0544f;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: -1;
}

Chúc các bạn thực hiện thành công hiệu ứng hover này nhé !

Chuyên Mục : Chia sẻ CSS Hiệu ứng CSS Hover effect css Hướng dẫn Thiết kế website