|
Css Bilen Dostlarımdan Yardım Lazım.
- Konuyu Başlatan Yakari
- Başlangıç tarihi
Sorunumu anlatabildim mi bilmiyorum hocamYaklaşık 5 k saatım vardetay verebilir misin
<div class="galeri"> <div class="resim"> <img src="resim1.jpg" alt="Resim 1"> </div> <div class="resim"> <img src="resim2.jpg" alt="Resim 2"> </div> <!-- Diğer resimleri buraya ekleyin --></div><script src="script.js"></script>
css
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;}.resim { position: relative; overflow: hidden;}.resim img { width: 100%; height: auto; display: block; transition: transform 0.3s ease-in-out;}.resim:hover img { transform: scale(1.1);}.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center;}.lightbox img { max-width: 90%; max-height: 90%;}
js
document.addEventListener('DOMContentLoaded', function () { const resimler = document.querySelectorAll('.resim'); const lightbox = document.createElement('div'); lightbox.classList.add('lightbox'); document.body.appendChild(lightbox); resimler.forEach(resim => { resim.addEventListener('click', function () { const img = this.querySelector('img'); lightbox.innerHTML = `<img src="${img.src}" alt="${img.alt}">`; lightbox.style.display = 'flex'; }); }); lightbox.addEventListener('click', function () { this.style.display = 'none'; });});
bu kodları kendi divlerine göre düzenle sorun çözülür
css
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;}.resim { position: relative; overflow: hidden;}.resim img { width: 100%; height: auto; display: block; transition: transform 0.3s ease-in-out;}.resim:hover img { transform: scale(1.1);}.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center;}.lightbox img { max-width: 90%; max-height: 90%;}
js
document.addEventListener('DOMContentLoaded', function () { const resimler = document.querySelectorAll('.resim'); const lightbox = document.createElement('div'); lightbox.classList.add('lightbox'); document.body.appendChild(lightbox); resimler.forEach(resim => { resim.addEventListener('click', function () { const img = this.querySelector('img'); lightbox.innerHTML = `<img src="${img.src}" alt="${img.alt}">`; lightbox.style.display = 'flex'; }); }); lightbox.addEventListener('click', function () { this.style.display = 'none'; });});
bu kodları kendi divlerine göre düzenle sorun çözülür
Hocam size özelden nasıl ulaşabilirim?