Image Rollover Borders do not change layout

Neden başlık türkçe değil bilmiyorum. Galiba tam karşılığını bulamadığım için. Bu yüzden ingilizce kullanmak zorunda kaldım. Fakat kısa bir açıklama yapmakta fayda var diye düşünüyorum. Bu yazıda bir img elementine atadığınız border’ın resmin sınırlarına taşımadan nasıl konumlandırılabileceğini anlatacağım. Öncelikle aşağıdaki örneği dikkatle inceleyin.

Örnekte link durumunda yanyana olan resimler fare imlecinin üzerine gelmesi ile etrafına 3px genişiliğinde kenarlık (border) alıyor. Border resmin yerleşim sınırları dışına taşmakta. Bu nedenle de etrafındaki resimler sağa ve sola doğru kaymış.

>>> DEMO >>>

Örnekte kullanılan HTML:

Örnekte kullanılan fakat problem oluşturan CSS:

Şimdi de resim (img) seçicisini ve link (a) ‘yı kullanarak hover olayını tanımlayalım.

#example-problem a img,
#example-problem a {
border: none; float: left;
}
#example-problem a:hover {
border: 3px solid black;
}

Buraya kadar kenarlığı önce sıfırladık, daha sonra :hover olayında tekrar tanımlayarak üzerine geldiğimizde kenarlığın görünmesini sağladık. Fakat border:3px solid black; kodu herhangi bir resmin üzerine geldiğimizde diğerlerinin kaymasına sebeb oluyor. nedeni ise çok basit. Block seviye elementler pozisyonları ve katman sırlamaları değiştirilmediği sürece birbirlerinin üzerine yerleşemezler. Bu nedenle dışa doğru 3′er px genişleyen a elementi diğerlerini iterek kendine yer açmak isteyecektir.

Margin kullanarak kenarlıkları içeri genişletme:

CSS ile resmin bütün kenarlarına eksi margin uyguluyoruz. Böylece Kenarlıklar ile dışarı taşan miktarı margin ile tekrar içeri çekerek sabit genişlik ve yüksekliği korumuş oluyoruz. Resmin yerleşimi de dışarı taşmadan yapılıyor. Bu yönetemi tavsiye ederim. Yukarıdaki CSS yerine bu CSS kullanıldığında;

#example-one a img,
#example-one a {
border: none;
overflow: hidden;
float: left;
}
#example-one a:hover {
border: 3px solid black;
}
#example-one a:hover img {
margin: -3px;
}

Sonuç aşağıdaki gibi olacaktır. overflow: hidden; stili, -3 px içeride kalan img elementinin görünmeyen kısımlarını ekrandan siliyor. İstediğimiz sonucu elde ettik.

Bu resimde de 3 boyutlu olarak margin: -3 px; in nasıl işe yaradığını görebilirsiniz. Bu yolun dışında başka bir yol daha olmalı …

Outline border kullanma:

CSS outline özelliğini kullanarak yerleşim değişmesini engeller.

#example-two a img,
#example-two a {
border: none; float: left;
}
#example-two a {
margin: 3px;
}
#example-two a:hover {
outline: 3px solid black;
}

Kaynaklar:

http://css-tricks.com/

http://www.globo.com/