Tryit Editor - HTML Live Editor

Edit This Code:
<!DOCTYPE html>
<html>
<head>

<style>
figure {
    display: flex;
    flex-flow: column;
    max-width: 500px;
    max-height: 250px;
    margin: auto;
    position:relative;
}

img {
    width:100%;
}

figcaption {
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    font: italic smaller sans-serif;
    padding: 5px 10px;
    position:absolute;
    bottom:0;
    right:0;
    border-top-left-radius: 7px;
}
</style>

</head>
<body>

<h1>Contoh Caption Custom</h1>

<figure>
    <img alt="pelabuhanratu" src="https://tutorial.kang-ismet.com/img/pelabuhanratu.webp">
    <figcaption>Pelabuhan Ratu - Sukabumi</figcaption>
<figure>

</body>
</html>
Kang Ismet - Tryit Editor
