Membuat Image Caption dengan Pseudo Class

Hallo teman-teman pada kesempatan kali ini saya akan membahas tentang Membuat Image Caption dengan Pseudo Class. sebelum kita memulainya saya berikan satu contoh image caption, teman-teman dapat melihatnya seperti pada gambar dibawah ini :

jadi pada gambar diatas itu merupakan contoh image caption dimana dalam sebuah gambar ada text/kalimat didalamnya. kalau untuk membuatnya di photoshop mungkin sangat mudah tinggal menambahkan text saja didalam sebuah gambarnya tapi kali ini kita akan membuatnya dengan menggunakan pseudo class yaitu :hover.
oke untuk lebih jelasnya mari kita praktekan saja langsung.
pertama tama siapkan text-editornya dan gambarnya lalu ketik script htmlnya seperti dibawah ini :

<div class="wrapper">
   <div class="caption" data-title="DumetSchool" data-description="Kursus Web Design, Web Master, Web Programming, Design Graphic, Flash Animation, Internet Marketing, WordPress, Video Editing, Dll.">
	<img src="logo.jpg" />
   </div>
</div>

jika sudah dengan htmlnya maka selanjutnya masukan script css nya seperti dibawah ini :

@import "https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Pacifico";
*, *:after, *:before {
  box-sizing: border-box;
}

.text--center {
  text-align: center;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
  font-style: italic;
}

html {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  height: 100%;
  user-select: none;
  font-family: 'Open Sans Condensed', sans-serif;
}

.wrapper {
  width: 400px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}

.caption {
  position: relative;
  -webkit-backface-visibility: hidden;
}
.caption img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: opacity .2s ease-in-out;
}
.caption img:hover {
  opacity: .5;
}
.caption::after, .caption::before {
  position: absolute;
  width: 100%;
  height: 50%;
  color: #fff;
  z-index: 1;
  transition: all 300ms ease;
}
.caption::before {
  content: attr(data-title);
  background: rgba(0, 0, 0, 0.5);
  font-size: 4em;
  font-family: 'Pacifico', sans-serif;
  text-align: center;
  padding-top: 5%;
  transform: translateY(-100%) scale(0.8);
}
.caption::after {
  content: attr(data-description) " ...";
  background: rgba(204, 204, 204, 0.7);
  top: 50%;
  padding: 20px;
  font-size: 1.4em;
  transform: translateY(100%) scale(0.8);
  color: #000;
}
.caption:hover::before, .caption:hover::after {
  transform: translateY(0%) scale(1);
}

Jika sudah html dan cssnya maka teman-teman simpan. kemudian langkah selanjutnya teman-teman coba jalankan/run di browser yang teman-teman gunakan.
maka hasilnya akan seperti pada gambar di bawah ini :
hasil sebelum dihover

hasil setelah dihover

oke jika hasilnya sudah seperti pada gambar diatas maka artinya teman-teman sudah berhasil dalam Membuat Image Caption dengan Pseudo Class.
oke untuk pembahasan kali ini dalam Membuat Image Caption dengan Pseudo Class.

cukup sampai disini dulu ya teman-teman.
semoga bermanfaat, sekian dan terimakasih.

Membuat Image Caption dengan Pseudo Class

Kategori