Cara Membuat Slide Konten Sederhana dengan CSS

Cara Membuat Slide Konten Sederhana dengan CSS - Banyak sekali yang bisa kita lakukan dengan HTML & CSS mulai dari membuat dan mendesain layout, membuat efek, dan lain sebagainya. Nah, kali ini saya akan berbagi tutorial sederhana CSS yaitu bagaimana Cara Membuat Slide Konten Sederhana dengan CSS yang nantinya bisa kalian terapkan pada desain halaman website kalian. Bagaiamana caranya, langsung saja simak langkah - langkah berikut ini.

Langkah pertama, tentu kita buat file terlebih dahulu dan membuat struktur html untuk kontennya seperti gambar dan paragraf seperti berikut. 

<body>
  <div class="wrapper-img">
    <div class="img-box">
      <img src="reactjs.png">
    </div>
    <div class="img-content">
      <h4>Lorem Ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna...</p>
    </div>
  </div>

  <div class="wrapper-img">
    <div class="img-box">
      <img src="css.jpg">
    </div>
    <div class="img-content">
      <h4>Lorem Ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna...</p>
    </div>
  </div>
</body>

Silahkan kalian isikan gambar bebas pada tag html img src.
Langkah selanjutnya adalah mendesain dan membuat slide untuk konten paragraf, untuk itu silahkan kalian ketikan kode CSS berikut untuk membuat slide kontennya.

* {margin:0;padding:0}

body {
  background-color:#eee;
  overflow:hidden;
  padding:50px;
}

.wrapper-img {
  width:360px;
  height:210px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  margin:0 2px 2px 0;
  float:left;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.img-box,
.img-content {
  height:200px;
  padding:5px 5px;
  transition:margin-top .4s ease-in-out .4s;
}

.img-content h4,
.img-content p {
  margin:0 0 .2em;
  padding:0 0;
}

.image-details h4 {font-size:120%}

.wrapper-img:hover .img-box {margin-top:-160px}

Setelah kalian ketikan semua kode HTML dan CSS diatas, silahkan simpan kembali filenya kemudian kalian bisa buka hasilnya dibrowser masing - masing. Maka hasilnya akan terlihat seperti pada gambar dibawah ini.

Cara Membuat Slide Konten Sederhana dengan CSS

Baik, cukup sekian tutorial bagaimana Cara Membuat Slide Konten Sederhana dengan CSS, semoga bermanfaat khususnya buat kalian yang sedang mempelajari HTML dan CSS serta menjadi referensi dalam membuat desain web. Selamat mencoba dan sampai jumpa diartikel selanjutnya.

21 Agustus 2019

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