Fare Üzerine Gelindiğinde Görsel Nasıl Soldurulur?
Görseller, web sitelerinde kullanıcı katılımını arttırırlar. Bu yüzden resimleri optimize etmeye ihtiyaç duyar, güzel resim galerilerinin nasıl ekleneceğini öğrenmek ister ve sitenizdeki herhangi bir resim sorunu düzeltmek istersiniz.
Göze çarpan resimler yapmak için birçok yol vardır. Bunlardan biri fade effect. Yani görselleri soldurma. Bu yazıda sizlere, wordpress sitenizde, fare üzerine gelindiğinde görüntülerin nasıl soldurulacağını anlatacağım.
Kullanıcı sitenizde bir resmin üzerine fareyi getirdiğinde görsel zamanla biraz solacak. Aşağıdaki örneğe ekran bakın:
Öncelikle size WordPress mesajlarınzdaki görsellerde basit solma efekti eklemek için ne yapmanız gerektiğini göstereceğim. Bunun için CSS kullanacağız. Yapmanız gereken tek şey aşağıdaki kodu temanızın style.css dosyasına yapıştırmak:
[css]
.post
img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* IE8 ve önceki sürümleri için */
}
[/css]
Bu CSS pasajı, WordPress yazılarında görüntülenen tüm görüntüleri etkileyecektir. Ancak, bu pasajda hafif bir aksaklık var. Bir kullanıcı bir görüntü üzerinden fareyi çektiğinde, o anda opaklık geçer. Bu biraz kaba hissettirebilir. Bu yüzden CSS geçiş kuralları ekleyerek biraz daha yumuşak geçiş yapmanıza olanak sağlayabiliriz.
[css]
.post
img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* IE8 ve önceki sürümleri için */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
[/css]
İstediğiniz etkiyi elde etmek için opaklık değeri veya geçiş gecikme zamanını değiştirebilirsiniz.
Bize aşağıdaki yorum formundan görüşlerinizi ve sorularınızı bırakarak ne düşündüğünüzü söylemekten çekinmeyin. Kolay gelsin.
