Membuat Text Hover Effect Menggunakan CSS – Pada artikel kali ini kita akan membahas bagaimana cara membuat text hover effect menggunakan CSS. Seperti biasa kita hanya akan menggunakan dua buah file yaitu index.html dan style.css. Simak artikel ini lebih lanjut untuk mengetahui bagaimana cara membuat text hover effect menggunakan CSS.

Daftar Isi

Kode pada file CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body{
  font-family: cursive;
}

.container{
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.word{
  background-image: linear-gradient(#ff2f97, #ff2f97);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position-x: right;
  transition: background-size 500ms;
  font-size: 4rem;
}

.word:hover{
  background-size: 100% 100%;
  background-position-x: left;
}

Kode pada file HTML

<!DOCTYPE html>
<html>
    <head>
        <TITLE>Text Hover Effect</TITLE>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div class="container">
        <div class="word">Inpows</div>
      </div>
    </body>
</html>

Hasil yang diperoleh

Ketika file index.html dibuka pada browser maka akan diperoleh hasil seperti dibawah ini.

Temukan source code CSS menarik lainnya hanya di Inpows.

Membuat Algoritma Insertion Sort di Kotlin

Membuat Algoritma Bubble Sort di Kotlin

Membuat Algoritma Binary Search Menggunakan Kotlin

Membuat Algoritma Linear Search di Kotlin