Cara Membuat Animasi Card dengan CSS

Cara Membuat Animasi Card dengan CSS - Pada pembahasan tutorial yang akan saya bagikan kali ini berkenaan tentang bagaimana Cara Membuat Animasi Card dengan CSS. Jika kalian pernah melihat tampilan card pada bootstrap mungkin sudah tidak asing lagi, namun kali ini saya akan mencoba membuat dengan CSS, dan siapa tau ada yang ingin membuat tampilan tetapi bingung cara membuatnya, berikut akan saya praktekan Cara Membuat Animasi Card dengan CSS.

Langkah 1 : Cara Membuat Animasi Card dengan CSS

Baik kita mulai membuat animasi card dengan membuat struktur HTML sederhana, untuk memuat gambar dan konten pada tampilan card nya, untuk itu silahkan kalian ketikan sintak HTML5 berikut.

<body>
    <div id="wrapper">
      <img src="images.jpeg"/>
          <h1>Look & Fell...</h1>
      <div class="overlay"></div>
      <div class="btn">
          <a href="https://www.dumetschool.com/blog/">SUBMIT</a>
      </div>
      <div class="content">
          <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
</body>

Pada img src, silahkan kalian bisa isikan gambar bebas sesuai keinginan.

Langkah 2 : Cara Membuat Animasi Card dengan CSS

Setelah membuat struktur HTML sperti diatas, untuk membuat card tidaklah susah, hanya saja kita harus bisa memanipulasi tampilan agar tampilan sederhana namun tetap menarik untuk dilihat. Nah, silahkan kalian bisa ketikan sintak CSS untuk mendesain tampilan card nya.

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
    background-color: #84817a;
    font-family: 'Ubuntu', sans-serif;
}
#wrapper {
    position: relative;
    width: 400px;
    margin: auto;
    border: 2px solid #E91E63;
    border-radius: 25px 25px 0 0;
}
.overlay {
    transition: background 0.5s ease;
}
#wrapper:hover .overlay {
    display: block;
    background: rgba(0, 0, 0, .3);
}
img {
    width: 400px;
    border-radius: 25px 25px 0 0;
}
h1 {
    position: absolute;
    width: 400px;
    left: 0;
    top: 120px;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    color: white;
    z-index: 1;
    transition: top .5s ease;
}
.content {
    margin-top: -21px;
    padding: 3px 0;
    height: 50px;
    color: white;
    text-align: center;
    background-color: #E91E63;
}
.content p {
    border-radius: 50px;
    background-color: white;
    color: #E91E63;
    line-height: 36px;
}
#wrapper:hover h1 {
      top: 90px;
}
.btn {
    position: absolute;
    width: 400px;
    left:0;
    top: 180px;
    text-align: center;
    opacity: 0;
    transition: opacity .35s ease;
}
.btn a:hover {
    background-color: #E91E63;
    color: white;
    opacity: 0.7;
}
.btn a {
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    color: white;
    border: solid 2px white;
    z-index: 1;
    border-radius: 50px;
}
#wrapper:hover .btn {
      opacity: 1;
}

Setelah semua sintak diatas telah kalian ketikan, selanjutnya simpan filenya dengan nama index.html kemudian kalian bisa lihat hasilnya pada browser masing - masing. Maka hasil akhirnya akan sperti pada gambar berikut.

Cara Membuat Animasi Card dengan CSS

Bagaiamana, cukup mudah buka untuk mendesain tampilan card dengan CSS ? baiklah, cukup sekian tutorial mengenai Cara Membuat Animasi Card dengan CSS, semoga tutorial ini bisa bermanfaat dan menambah referensi dalam mendesain tampilan web. Selamat mencoba :)

27 Mei 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat