CSS3 Style Image

Kita bisa membuat tampilan gambar di web menjadi lebih menarik.

Walaupun, tidak banyak CSS yang dikhususkan untuk gambar. Tapi, tidak sedikit property yang bisa kita gunakan untuk membuat tampilan gambar menjadi lebih keren.

Gambar rounded (tepi lengkung)

Kita bisa buat gambar menjadi melengkung di pojoknya atau bahasa kerennya adalah rounded / radius.

Gambar bayangan

Efek css shadow seperti gambar berikut:

img {box-shadow: 4px 7px 18px 2px rgba(0,0,0,0.26);}

Supaya lebih keren ditambah lagi border, menjadi seperti ini:

img {
 border:5px solid white;
 box-shadow: -2px 0px 18px 2px rgba(0,0,0,0.44);
 }

Gambar di tengah

Secara default, jika kita memasukkan gambar ke web maka gambar akan tampil di sebelah kiri.

Supaya gambar di tengah, maka margin-left dan margin-right di set auto, dan display menjadi block.

img { 
 margin-left: auto;
 margin-right: auto;
 display: block;
 }

Gambar responsive

Image responsive adalah gambar yang ukurannya bisa berubah tergantung layarnya.

Caranya mudah, kita tinggal set salah satu max-width atau max-height menjadi 100%.

Contoh 1.

img {
max-width: 100%;
height: auto;
}

Contoh 2.

img {
max-height: 100%;
width: auto;
}

Gambar transparan

Supaya image menjadi transparan, kita gunakan css opacity.

Opacity: 0.20

Opacity: 0.60

Opacity: 1.0

img { opacity:0.60 }

Teks di dalam gambar

<style>
.kotak {
  position: relative;
}

.kotak img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

.bawahkiri {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

.ataskiri {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
.ataskanan {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
.bawahkanan {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
.tengah {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
</style>
<div class="kotak">
  <img src="https://halamansatu.biz/wp-content/uploads/2020/04/cara-buat-shadow-css3.jpg">
  <div class="bawahkiri">Bawah kiri</div>
  <div class="ataskiri">Atas kiri</div>
  <div class="ataskanan">Atas kanan</div>
  <div class="bawahkanan">Kanan Bawah</div>
  <div class="tengah">Ditengah</div>
</div>