Make Image Full Screen Just use CSS

Waktu masih kecil, mungkin sobat pernah naik korsel! Kalau di dunia HTML korsel yang dimaksudkan bukan seperti yg kita duga? Carousel nama proyek besutan dari DizzyZane. Inspirasi dari Carousel CSS Only (JS optional) from codepen, dikembangkan dengan menambahkan click for fullscreen :-) Carousel di sini adalah tidak lain slider image Untuk lebih jelas silahkan lihat demo https://dizzyzane.github.io/carousel-css Source file: Carousel made using Jade, Stylus.
Setelah melihat kodenya, AA Koben comot CSS code yg membuat image menjadi bisa full-screen ketika di klik! Diterapkan untuk single image. Seperti apa jadinya ramuan...let's bekicot!!!

codepen.io/beben-koben/full/LZEYBR

.carousel-container {
padding: 0;
margin: 0 auto;
display: block;
max-width: 100%;
width: 400px;
height: 300px;
position: relative;
list-style-type: none;
}
.carousel-container .carousel-content {
height: 300px;
overflow: hidden;
background: rgba(0,0,0,0.9);
position: absolute;
top: 0;
box-shadow: 0 5px 5px -5px #333;
padding: 0;
text-align: center;
line-height: 296px;
}
.carousel-container .carousel-content img {
opacity: 0;
padding: 0;
width: auto;
height: auto;
max-height: 300px;
max-width: 400px;
vertical-align: middle;
-webkit-animation-name: ziim;
-webkit-animation-duration: 0.6s;
animation-name: ziim;
animation-duration: 0.6s;
}
@-webkit-keyframes ziim {
from {-webkit-transform:scale(1)}
to {-webkit-transform:scale(0)}
}
@keyframes ziim {
from {transform:scale(1)}
to {transform:scale(0)}
}
.carousel-container .carousel-toggle:checked ~ .carousel-content,.carousel-container .carousel-toggle.active ~ .carousel-content {
height: 100%;
width: 100%;
}
.carousel-container .carousel-toggle:checked ~ .carousel-content img,.carousel-container .carousel-toggle.active ~ .carousel-content img {
opacity: 1;
}
.carousel-fullscreen {
position: absolute;
bottom: 0;
right: 0;
margin: 0 4px 4px 0;
width: 27px;
height: 27px;
cursor: pointer;
background: #000 url('IMAGE 27px x 27px') no-repeat center center;
}
.carouselFullScreen:checked,.carouselFullScreen.active {
display: block;
height: 100%;
}
.carouselFullScreen:checked+.carousel-container,.carouselFullScreen.active+.carousel-container {
margin: 0;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.carouselFullScreen:checked+.carousel-container .carousel-toggle:checked ~.carousel-content >li,.carouselFullScreen.active+.carousel-container .carousel-toggle:checked ~.carousel-content >li {
height: 100%;
line-height: 99vh;
}
.carouselFullScreen:checked+.carousel-container .carousel-fullscreen,.carouselFullScreen.active+.carousel-container .carousel-fullscreen {
width: 54px;
height: 54px;
background: #000 url('IMAGE 54px x 54px') no-repeat center center;
}
.carouselFullScreen:checked+.carousel-container img,.carouselFullScreen.active+.carousel-container img {
width: auto;
height: 100%;
max-height: 100vh;
max-width: 100vw;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
input[type=checkbox].carouselFullScreen,input[type=checkbox].carousel-toggle {
visibility: hidden;
}

Silahkan edit-edit kembali sesuai dengan kebutuhan masing-masing :) Gantikan kode IMAGE 27px x 27px dan IMAGE 54px x 54px dengan gambar kreasi kalian. Itu gambar untuk menandakan click full screen!

<input id="UNIK-ID" type="checkbox" class="carouselFullScreen" />
    <ul class="carousel-container">
        <li>
            <input type="checkbox" checked="checked" class="carousel-toggle" />
            <ul class="carousel-content">
                <li><img src="LINK-GAMBAR" alt="" /></li>
            </ul>
        </li>
        <label for="UNIK-ID" class="carousel-fullscreen"></label>
</ul>

Perhatikan code UNIK-ID harus sama dalam satu kesatuan dan harus berbeda untuk membuat lebih dari satu image.
DONE.
Bonus:
CSS + HTML only Accordion Element - jQuery Facebook album browser (sample-all-albums) - One font a day keeps the doctor away - Header Navigation Menu - ASCII-art folder structure diagram in semantic markup + CSS - Facebook Album Browser - HTML5 Accessibility - flag-icon-css - emojionearea - Image hover effects that work with or without bootstrap - How to Use the HTML5 Full-Screen API - Full screen image viewer - CSS loaders and timing functions - CSS-only modal
See you :-h