Cara Membuat Slide Konten Sederhana dengan CSS

21/08/2019    Risman Hakim    52     Website

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.

Web Design, HTML CSS

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