HTML5 ve CSS3 ile Resim Açıklamaları

Bugün sizlerle HTML5 ile gelen figure ve figcaption tanımlarını CSS3‘ün animasyon öğeleriyle süsleyerek şık resim açıklamaları oluşturacağız. Bu işlemi daha önce, HTML5 öğeleri olmadan benzer yollarla “CSS ile SEO ve performans dostu harika resim açıklamaları” başlığı altında hazırlamıştık. Eski makalemizi güncellemektense bu süreçte gelişen teknolojinin nimetlerinden yararlanarak yenisini hazırlamaya karar verdik.

ÖRNEĞİ GÖRÜNTÜLE

HTML5 ve CSS3 kullanarak resim açıklamaları nasıl hazırlanır?

Öncelikle ‘niye HTML5 tanımları?’ sorusunun cevabını hatırlayalım. Birçok arama motoru öncesinde ALT ve TITLE açıklamaları için gösterdiği dikkati artık figür öğeleri için de göstermekte. Bu yüzden figure ve figcaption kullanmak faydalı.

Hazırlanışında ise temel mantık figcaption içerisindeki resim açıklamasını varsayılan seçeneklerde gizlemek. Üzerine gelindiğinde (hover) göstermek. Ayrıca yine hover işlemi için de ilgili resmin büyümesi gibi bir aksiyon da yapacağız. Bu da tasarımımıza hem etkileşim hem de şık bir görüntü katacak.

CSS Kodları

İlk olarak figure içerisinde bulunan tüm öğelere geçiş efektlerini ekleyelim. Bildiğiniz gibi * işaretini selectorun içerisinde kullanarak figure içerisindeki tüm öğeleri seçebiliyoruz.

figure *, figure *::before, figure *::after{
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

Daha sonra üzerine figure için bir tanımda bulunalım. Burada görselin boyutlarını da belirtmemiz gerekiyor. Ayrıca overflow tanımlaması sayesinde kaydırma çubuklarını görünmez yapıyoruz. Bu da, üzerine gelince büyüyen görselin kaydırma çubuğu oluşturmasını engelliyor.

figure{
  width: 500px;
  height: 281px;
  overflow: hidden;
  position: relative;
  border: 3px solid black;
}

Şimdi figcaption öğeleri için genel bir stil atayalım. Absolute pozisyonlama ile onu bağlı olduğu öğenin üzerine yayıyoruz.

figcaption{
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  display: table;
}

Şimdi de figcaption içerisine oluşturduğumuz div’i şekillendirelim. Bu div aslında kalın bir çizgi çekmemizi sağlayacak. Üzerine gelindiğinde ve after tanımı için de birkaç satır kod ekliyoruz.

figcaption div{
  display: table-cell;
  vertical-align: middle;
  position: relative;
  top: 20px;
  opacity: 0;
  color: white;
}

figcaption div:after{
  position: absolute;
  content: "";
  left: 0; right: 0;
  bottom: 40%;
  text-align: center;
  margin: auto;
  width: 0%;
  height: 3px;
  background: white;
}

figcaption:hover div{
  opacity: 1;
  top: 0;
}

figcaption:hover div:after{
  width: 50%;
}

Şimdi de görselimizi yönetelim. Scale3d ile üzerine gelince 1.3 oranında büyümesini sağlayalım.

figure img{
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

figure:hover img{
  -webkit-transform: scale3d(1.3, 1.3, 1);
          transform: scale3d(1.3, 1.3, 1);
}

Son olarak figure’ün üzerine gelindiğinde figcaptionların siyah ve transparan bir arkaplan ile kaplanmasını sağlayalım.

figure:hover figcaption{
 background: rgba(1,1,1,.5);
}

HTML Kodları

Şimdi de klasik HTML5 görsel tanımlarını kullanarak resmimizi ekleyelim.

<figure>
  <img src="https://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-991.jpg"/>
  <figcaption><div>adobewordpress.com</div></figcation>
</figure>

Bu kadar!

Resim açıklamalarının önemi

Makalemizi bitirmeden önce sizlere resim açıklamalarının önemini tekrar hatırlatmak isteriz. Web sayfanızda bulunan her görsel için ALT bilgisi girmenizin önemini uzun uzun konuşmuştuk. Figcaption ile birlikte görsel açıklamalarının sayısı üçe çıktı. Böylece anahtar kelimelerinizi sadece ALT ve TITLE ile değil, FIGCAPTION ile de tekrarlayabileceksiniz.

İyi çalışmalar.