Halo temen-temen, kembali lagi dengan saya. Pada artikel kali ini saya akan membagikan kode lengkap dan sederhana bagaimana cara membuat Container Card Block Animasi Keren Elegan menggunakan HTML dan CSS versi #1.

Kode ini sangat sederhana sekali namun sudah memiliki fitur yang sangat elegan, keren dan modern. Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Tampilan Card Block

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

Source Assets Icons (2416632-internet-of-things) – https://www.flaticon.com/packs/internet-of-things-78

index.html

/index.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Card Block Perfect Hover #1</title>

    <style>
      body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background: #212121;
        font-family: "Courier New", Courier, monospace;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      img {
        filter: brightness(0) invert(1);
        max-height: 120px;
      }

      .container {
        width: 1080px;
        position: relative;
        display: flex;
        justify-content: space-between;
      }

      .container .card {
        position: relative;
      }

      .container .card .card-content {
        width: 300px;
        height: 280px;
        transition: 0.4s;
      }

      .container .card .card-content.card-header {
        position: relative;
        background: #212121;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform: translateY(140px);
      }

      .container .card:hover .card-content.card-header {
        transform: translateY(0);
      }

      .container .card.card-style-1:hover .card-content.card-header {
        background: #880e4f;
      }

      .container .card.card-style-2:hover .card-content.card-header {
        background: #4a148c;
      }

      .container .card.card-style-3:hover .card-content.card-header {
        background: #311b92;
      }

      .container .card .card-content.card-header .content {
        opacity: 0.3;
        transition: 0.4s;
      }

      .container .card:hover .card-content.card-header .content {
        opacity: 1;
      }

      .container .card .card-content.card-header .content h3 {
        margin: 12px 0 0;
        padding: 0;
        color: #fff;
        text-align: center;
        font-size: 20px;
      }

      .container .card .card-content.card-body {
        position: relative;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
        transform: translateY(-140px);
      }

      .container .card:hover .card-content.card-body {
        transform: translateY(0);
      }

      .container .card .card-content.card-body .content p {
        margin: 0;
        padding: 0;
      }

      .container .card .card-content.card-body .content a {
        margin: 16px 0 0;
        padding: 6px;
        display: inline-block;
        text-decoration: none;
        font-weight: 900;
      }

      .container .card.card-style-1 .card-content.card-body .content a {
        color: #880e4f;
        border: 1px solid #880e4f;
      }

      .container .card.card-style-2 .card-content.card-body .content a {
        color: #4a148c;
        border: 1px solid #4a148c;
      }

      .container .card.card-style-3 .card-content.card-body .content a {
        color: #311b92;
        border: 1px solid #311b92;
      }

      .container .card .card-content.card-body .content a:hover {
        background: #212121;
        color: #fff;
        border: 1px solid #212121;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="card card-style-1">
        <div class="card-content card-header">
          <div class="content">
            <img
              src="2416632-internet-of-things/svg/011-smarthome.svg"
              alt=""
            />
            <h3>Smart Home</h3>
          </div>
        </div>
        <div class="card-content card-body">
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              ullam excepturi ipsum, praesentium quibusdam ex nemo! Placeat
              corporis exercitationem deserunt nisi laboriosam vitae delectus
              corrupti voluptates.
            </p>
            <a href="#">Selengkapnya</a>
          </div>
        </div>
      </div>

      <div class="card card-style-2">
        <div class="card-content card-header">
          <div class="content">
            <img src="2416632-internet-of-things/svg/008-cloud.svg" alt="" />
            <h3>Cloud</h3>
          </div>
        </div>
        <div class="card-content card-body">
          <div class="content">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus
              reprehenderit non cumque quaerat nemo natus veritatis architecto
              quibusdam error doloremque laborum quos veniam, nisi nam
              dignissimos laboriosam ipsum? Neque, nemo.
            </p>
            <a href="#">Selengkapnya</a>
          </div>
        </div>
      </div>

      <div class="card card-style-3">
        <div class="card-content card-header">
          <div class="content">
            <img
              src="2416632-internet-of-things/svg/020-smartphone.svg"
              alt=""
            />
            <h3>Smart Phone</h3>
          </div>
        </div>
        <div class="card-content card-body">
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
              necessitatibus sed minus quia assumenda distinctio commodi
              molestiae in iste, incidunt accusantium ratione aut laudantium,
              consectetur temporibus quis vitae quaerat ipsam?
            </p>
            <a href="#">Selengkapnya</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Semoga Bermanfaat …