Cara Membuat Caption Image Dengan CSS

Hallo sahabat, selamat datang di website Dumetschool yang membahas tentang seputar pemograman dalam suatu Website. Dalam artikel ini saya akan membuat sebuah tampilan untuk memunculkan caption gambar. Oke kalau begitu jangan lupa simak langkah-langkah pembuatannya berikut ini:Pertama yang dipersiapkan membuat caption image buat struktur HTMLnya seperti code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="pict satu"></div>
                <div class="capt">
                    <span>HTML 5</span><br>
                    Bahasa struktur dasar dari Website
                </div>
        </div>
        <div class="row">
            <div class="pict dua"></div>
                <div class="capt">
                    <span>CSS 3</span><br>
                    Cascading Style Sheet versi ke 3
                </div>            
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

Bahasa struktur dasar dari Website

</div>

Cascading Style Sheet versi ke 3

</div>

</body>

</html>

dalam strukltur html saya membuat 2 buah row yang digunakan untuk menampung 2 gambar dan dekripsi atau isi captionnya.

Langkah berikutnya tambahkan style CSS untuk membuat tampilan semakin menarik:

@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
body{
    padding:0;
    margin:0;
    background-color:#29416d;
}
.container{
    width: 900px;
    margin:auto;
    display: flex;
}
.row{
    perspective: 800px;
    -webkit-perspective:800px;
    margin: 25px;
}
.pict{
    height: 300px;
    width:300px;
    border:10px solid#fff;
    position: relative;
    border-radius: 10px;
}
.satu{
    background:url(html5-games.jpg);
    background-size: 300px 300px;
}
.dua{
    background:url(css3-user.png);
    background-size: 300px 300px;
}
.capt{
    background-color: #fff;
    height: 80px;
    width: 320px;
    font-size: 20px;
    font-weight: bold;
    color:#4b3846;
    font-family: 'Titillium Web', sans-serif;
    box-sizing: border-box;
    padding-top:8px;
    transform-style: preserve-3d;
    transform: rotateX(-180deg);
    transform-origin: top;
    z-index: -1;
    position: relative;
    backface-visibility: hidden;
    text-align: center;
    border-top: 1px solid #566566;
    border-radius: 10px;
}
.row:hover .capt{
    transform: rotate(0deg);
}

@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');

body{

padding:0;

margin:0;

background-color:#29416d;

}

.container{

width: 900px;

margin:auto;

display: flex;

}

.row{

perspective: 800px;

-webkit-perspective:800px;

margin: 25px;

}

.pict{

height: 300px;

width:300px;

border:10px solid#fff;

position: relative;

border-radius: 10px;

}

.satu{

background:url(html5-games.jpg);

background-size: 300px 300px;

}

.dua{

background:url(css3-user.png);

background-size: 300px 300px;

}

.capt{

background-color: #fff;

height: 80px;

width: 320px;

font-size: 20px;

font-weight: bold;

color:#4b3846;

font-family: 'Titillium Web', sans-serif;

box-sizing: border-box;

padding-top:8px;

transform-style: preserve-3d;

transform: rotateX(-180deg);

transform-origin: top;

z-index: -1;

position: relative;

backface-visibility: hidden;

text-align: center;

border-top: 1px solid #566566;

border-radius: 10px;

}

.row:hover .capt{

transform: rotate(0deg);

}

Jika sudah simpan kedua file diatas lalu jalankan pada browser masing-masing laptop atau computer sahabat dan lihat hasilnya seperti tampilan dibawah ini:

Saya kira cukup pembhasan tentang cara membuat caption image dengan css, semoga bermanfaat dan sampai jumpa lagi pada lain kesempatan, selamat mencoba.

teriam kasih

Facebook DUMET School

Categories