CSS - Galeri Gambar

Selamat datang, para desainer web yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik dari Galeri Gambar CSS. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Mari kitaubah gambar statis yang membosankan menjadi galeri yang menarik dan interaktif agar situs web Anda tampak menarik!

Galeri Gambar Sederhana

mari kita mulai dari dasar. Galeri gambar sederhana mirip dengan mengatur foto di dinding Anda - itu tentang presentasi. Berikut adalah cara kita membuatnya menggunakan CSS:

<div class="gallery">
<img src="image1.jpg" alt="Gambar 1">
<img src="image2.jpg" alt="Gambar 2">
<img src="image3.jpg" alt="Gambar 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

Dalam contoh ini, kita menggunakan flexbox untuk membuat tata letak yang responsif. Properti flex-wrap: wrap memastikan gambar kita akan lipat ke baris berikutnya jika tidak cukup ruang. justify-content: center mengatur gambar kita secara horisontal.

Galeri Gambar Dengan Efek Hover

Sekarang, mari kita tambahkan sedikit interaktivitas! Efek hover bisa membuat galeri Anda lebih menarik. Itu seperti menambahkan pesan rahasia yang hanya muncul saat Anda melihat lebih dekat.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Gambar 1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- Ulangi untuk gambar lain -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

CSS ini menciptakan overlay yang muncul saat Anda hover di atas gambar. Properti transition memberikan efek fade-in yang halus.

Galeri Gambar Responsif Menggunakan Media Query

Dalam dunia multi-perangkat saat ini, responsivitas adalah kunci. Mari kita buat galeri kita adaptatif terhadap ukuran layar yang berbeda:

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

CSS ini menggunakan CSS Grid untuk membuat tata letak yang responsif. Fungsi minmax memastikan gambar kita minimal 200px lebar, tapi bisa tumbuh jika ada ruang. Media queries mengatur tata letak untuk layar yang lebih kecil.

Sintaks

Mari kitaambil sedikit waktu untuk memahami sintaks yang kita gunakan. Properti CSS mengikuti struktur berikut:

selector {
property: value;
}

Berikut adalah tabel properti CSS umum yang digunakan dalam galeri gambar:

Properti	Deskripsi	Contoh
display	Menentukan perilaku tampilan	display: flex;
width	Mengatur lebar elemen	width: 200px;
height	Mengatur tinggi elemen	height: 200px;
margin	Mengatur margin elemen	margin: 10px;
object-fit	Menentukan bagaimana gambar harus diubah ukurannya	object-fit: cover;
position	Menentukan jenis metode penempatan	position: relative;
opacity	Mengatur tingkat opacity elemen	opacity: 0;
transition	Menentukan efek transisi	transition: .5s ease;

Galeri Gambar Dengan Scroll Horizontal

kadang-kadang, Anda ingin galeri Anda scroll secara horizontal. Itu seperti photo reel yang Anda bisa geser:

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Gambar 1">
<img src="image2.jpg" alt="Gambar 2">
<!-- Tambahkan lebih banyak gambar jika diperlukan -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

CSS ini menciptakan galeri yang scroll secara horizontal. Properti overflow-x: auto menambahkan scrollbar horizontal jika diperlukan.

Galeri Gambar Dengan Scroll Vertikal

Galeri scroll vertikal sangat cocok untuk menampilkan jumlah besar gambar dalam ruang kecil:

<div class="gallery-vertical">
<img src="image1.jpg" alt="Gambar 1">
<img src="image2.jpg" alt="Gambar 2">
<!-- Tambahkan lebih banyak gambar jika diperlukan -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

CSS ini menciptakan galeri yang scroll secara vertikal. Properti overflow-y: scroll menambahkan scrollbar vertikal.

Galeri Gambar Menggunakan CSS Grid

CSS Grid adalah alat yang kuat untuk membuat tata letak yang kompleks. Mari kita gunakan itu untuk membuat galeri dinamis:

<div class="grid-gallery">
<img src="image1.jpg" alt="Gambar 1">
<img src="image2.jpg" alt="Gambar 2">
<img src="image3.jpg" alt="Gambar 3">
<img src="image4.jpg" alt="Gambar 4">
<img src="image5.jpg" alt="Gambar 5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

CSS ini menciptakan tata letak grid di mana beberapa gambar menjangkau lebih banyak kolom atau baris, menciptakan tata letak yang lebih dinamis.

Galeri Gambar Dengan Tab

Galeri dengan tab adalah cara yang bagus untuk mengatur gambar berbeda:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Nature</button>
<button class="tablinks" onclick="openTab(event, 'City')">City</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Nature 1">
<img src="nature2.jpg" alt="Nature 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="City 1">
<img src="city2.jpg" alt="City 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

CSS ini menciptakan tabbed interface. Anda akan memerlukan JavaScript untuk membuatnya berfungsi:

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

Galeri Slideshow

mari kitabuat slideshow sederhana:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Anda akan memerlukan JavaScript untuk mengontrol slideshow:

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Ubah gambar setiap 2 detik
}

Galeri Slideshow Dengan Thumbnail

Akhirnya, mari kita gabungkan slideshow kita dengan thumbnail untuk pengalaman yang lebih interaktif:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

Anda akan perlu mengubah JavaScript untuk menghandle klik thumbnail:

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Dan itu adalah! Kita telah meliputi banyak teknik galeri gambar CSS. Ingat, latihan membuat kesempurnaan. Cobalah menggabungkan teknik ini untuk membuat galeri unik Anda sendiri. Selamat coding!

Credits: Image by storyset