Cara Membuat Animasi Card dengan CSS

27/05/2018    Risman Hakim    1724     Website

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 :)

HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More