Css3 ile Resimlere Lightbox Efekti Verme

Bu yazımızda da paragraf içine yerleştirilmiş resimlere Css ile nasıl lightbox efekti verildiğini anlatmaya çalışacağım. 

Javascript gerektirmeden bir lightbox efekti oluşturmak için Css3 ün özelliklerinden faydalanabiliriz. Bu, paragraf içine yerleştirilmiş görüntüler ve stil galerileri için çok güzel olur.

Küçük resime tıklandığında, büyük resim lightbox efekti ile sayfa ortasında açılmakta ve arka zemin koyulaşmaktadır. 

Kaynak kodlarını sayfa sonunda verdiğim linkten indirebilirsiniz.

Önce resmi metinle birlikte paragrafa yerleştirelim.

<p><a class="imgright" href="#image01"><img src="lightbox01-kucuk.jpg" alt=""
 width="200" height="133" /></a><a href="#" id="image01" class="lightbox" title="
Sidney Opera Binası"><img src="lightbox01.jpg" alt="" width="600" height="400" />
</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue est vel 
elit tempor a pellentesque dui consectetur. Morbi mattis varius lacus, in faucibus 
tortor viverra non. Cras accumsan suscipit pulvinar. Mauris venenatis volutpat leo, 
sit amet fringilla odio convallis ut. Donec sodales, nunc vel mattis aliquam, quam 
sapien lobortis leo, ut elementum nulla sapien non leo. Nullam vulputate, dui at 
cursus tincidunt, elit velit tincidunt justo, vitae bibendum arcu turpis sit amet 
nulla.</p><br>

Yukarıda ki örnek kodlarımızda büyük resme, küçük resmin hedefi olarak sarı renkle vurgulu href="#image01" linkini veriyoruz.

Küçük resmin görüntüsünü yerleştirmek için de sarı renkle vurgulu imgright classını veriyoruz. Küçük resmimize de  linghtbox01.jpg diyoruz.

Şimdi lightboxu oluşturduğumuz html kodlarımıza gelince:

image01 : Küçük resmimizin kimliği

lightbox: Bağlantıya stil olarak kullanmak üzere sınıfına lightbox verdik.

title: Büyük resmizin altında görünecek resim açıklama başlığı.

Şimdi, ikinci resmimizide ikinci paragraf arasına yerleştirelim.

<p><a class="imgleft" href="#image02"><img src="lightbox02-kucuk.jpg" alt="" 
width="200" height="133" /></a><a href="#finished" id="image02" class="lightbox" 
title="Golden Gate Köprüsü"><img src="lightbox02.jpg" alt="" width="600" height=
"400" /></a>Curabitur gravida faucibus feugiat. Phasellus dignissim hendrerit euismod.
Nulla in sem eu turpis dictum consequat ac non eros. Ut quam leo, ornare a aliquet a, 
posuere egestas ligula. Aenean euismod, nulla pharetra pharetra vestibulum, nunc enim 
feugiat purus, vitae pretium nisi enim vel libero. Fusce id mauris dolor. Ut cursus 
placerat massa, ut tincidunt nisl malesuada id. Maecenas consectetur laoreet tincidunt.
Aenean non est non augue sodales commodo a nec sapien.</p>

Küçük resmimizin görüntüsünü bu sefer imgleft olarak yerleştiriyoruz. Küçük resmimizin kimliğine linghtbox02.jpg diyoruz.

Büyük resmimizin kimliğine de image02 diyoruz.

Şimdi Css kodlarımıza geçelim. Önce tarayıcımızda ki boşlukları kaldıralım.

html, body, p, a, img{ 
  margin: 0;
  padding: 0;
  border: 0;
}

display: none ile görüntüyü gizleyelim ve resimlerimizin stil kodlarını yazalım.

.lightbox img {
  display:none;
}


img {
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
  border-radius:10px;
}

Paragrafın sağ ve soluna gelecek resimlerimizi yerleştirme işlemini yapalım.

.imgleft{ 
  float:left;
  margin:0 10px 10px 0;
}

.imgright{ 
  float:right;
  margin:0 0 0 10px;
}

Küçük resim tıklandığında büyük resmi görüntüleyelim, konumunu sabit yapalım ve tarnsition özelliği uygulayalım. 

lightbox:target img { 
   display: inline-block;
}

.lightbox {
   z-index: 9999;
   position: fixed; 
}

.lightbox img {
   margin-top: 100px;
   padding: 10px 10px 25px 10px;
   transition: opacity .25s ease-in-out; 
}

Büyük resimin 100 % açılması ve açıldığında arka planda kalan paragraf sayfasının  koyulaşmasını sağlayalım.

.lightbox {
   background: rgba(0,0,0,0.7); 
}

.lightbox:target {
   width: auto; 
   height: auto; 
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Resim altına başlık yazımızın stil kodlarını da oluşturalım.

.lightbox {
   font-family:sans-serif; 
   font-size:1.2em;
   text-align: center;
}

a.lightbox{
   color:#232323;
   text-decoration:none;
   font-size:1em;
}

a.lightbox:after{
   content: attr(title);
   display: block;
   margin-top:-30px;

Kaynak Kodları İNDİR

Bitmiş örnek:

Css3 ile Resimlere Lightbox Efekti