Cara Membuat Efek Glitch Hover Menggunakan CSS

HobbyTekno - Postingan ini adalah Lanjutan dari postingan Cara Membuat Efek Glitch Aktif Menggunakan CSS.
Kali ini kita akan membuat Efek Hover, jadi bukan efek aktif lagi. Efek ini akan muncul saat kita mengarahkan kursor pada bagian atau text yang ingin diberi efek glitch. Langsung saja berikut caranya.

Langkah-Langkah Membuat Efek Glitch Hover Menggunakan CSS

1. Salin kode CSS berikut diatas </b:skin> atau </style> agar effect glitchnya muncul.

/* Text Glitch Hover */
.hobbyteknoGlitch:hover {
  color: #000;
  position: relative;
  animation: hobbyteknoGlitch1 2.5s infinite;
  -moz-animation: hobbyteknoGlitch1 2.5s infinite;
  -webkit-animation: hobbyteknoGlitch1 2.5s infinite;
  -o-animation: hobbyteknoGlitch1 2.5s infinite;
}
.hobbyteknoGlitch:hover::before,  .hobbyteknoGlitch:hover::after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.hobbyteknoGlitch:hover::before {
  color: #000;
  animation: hobbyteknoGlitch2 2.5s infinite;
  -moz-animation: hobbyteknoGlitch2 2.5s infinite;
  -webkit-animation: hobbyteknoGlitch2 2.5s infinite;
  -o-animation: hobbyteknoGlitch2 2.5s infinite;
}
.hobbyteknoGlitch:hover::after {
  color: #000;
  animation: hobbyteknoGlitch3 2.5s infinite;
  -moz-animation: hobbyteknoGlitch3 2.5s infinite;
  -webkit-animation: hobbyteknoGlitch3 2.5s infinite;
  -o-animation: hobbyteknoGlitch3 2.5s infinite;
}
@keyframes hobbyteknoGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes hobbyteknoGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes hobbyteknoGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes hobbyteknoGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes hobbyteknoGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes hobbyteknoGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}

2. Untuk memanggil atau memunculkannya kita hanya perlu menyalin kode HTML berikut pada bagian yang di inginkan. misalkan pada Postingan.

<div class="hobbyteknoGlitch" data-text="Hover Glitch">Hover Glitch</div>

Hasilnya akan seperti berikut.

Hover Glitch

Sekian Cara Membuat Efek Glitch Hover Menggunakan CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar