CSS ile Galerilerde Resim Açıklamalarını Gösterme

Adı : CSS ile Galerilerde Resim Açıklamalarını Gösterme

CSS (Cascading Style Sheets) ile galerilerde resim açıklamaları göstermek oldukça kolaydır. Bu makalede, CSS kullanarak resim açıklamalarını galerilerde nasıl gösterebileceğinizi ve bu konuda farklı örneklerle nasıl uygulayabileceğinizi öğreneceksiniz. Ayrıca, makalenin sonunda sık sorulan sorular bölümü yer almaktadır.
Resim Açıklamalarını Gösterme Yöntemleri
CSS kullanarak galerilerde resim açıklamalarını göstermenin birden fazla yöntemi vardır. Ancak, genellikle üç yöntem tercih edilir. Bunlar: resim kapsayıcı, resim alt etiketi ve resim açıklama veri öğesi yöntemleridir.
1. Resim Kapsayıcı Yöntemi
Bu yöntemde, resimlerinizi kapsayan bir div elemanı oluşturmanız gerekiyor. Ardından, bu div içerisinde bir başlık etiketi (

,

veya

) kullanarak resimlere açıklama ekleyebilirsiniz. Bu yöntem, aynı zamanda SEO açısından da yararlıdır. Çünkü başlık etiketleri, sayfadaki önemli anahtar kelimeleri belirlemeye yardımcı olur.
Örnek Kod:
HTML:
```

Resim Başlığı

```
CSS:
```
.resim-kapsayici {
position: relative;
}
.resim-kapsayici h3 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #fff;
background-color: rgba(0,0,0,0.7);
margin: 0;
padding: 10px;
}
```
Bu kod, resim kapsayıcısında resim ve resim açıklaması içerir. CSS, resim kapsayıcısına göre resim açıklamasını stilize ediyor. Açıklama, resim altında dikey olarak hizalanır ve arka planı saydam koyu bir renk olan bir kutu içinde yer alır.
2. Resim Alt Etiketi Yöntemi
Resim kapsayıcı yöntemine benzer şekilde, bu yöntemde de resim etiketi içinde açıklama eklenir. Ancak, bu yöntemde açıklamaların resim alt etiketinde yer alması gerekir. Bu yöntem, sadece yazılacak kodu azaltmakla kalmaz, aynı zamanda sayfa yüklenme süresini de azaltır.
Örnek Kod:
HTML:
```

Resim Başlığı