Resme Highlight Efekti Verme

Bu yazımızda resimlere donuk özelliği vererek fare ile üstüne gelindiğinde Highlight yani vurgulama efekti vermeyi göreceğiz. Bağlantının hover etkisi üzerinde yapacağız.

CSS örneğimizde özelleştirilmiş opacity kullanımını da görmüş olacağız. IE 5.5 ve üzeri tarayıcılarda \”filter\” özelliği için aralık değerleri 0-100 arasında ve Firefox tarayıcıda \”-moz-opacity\” değeri 0-1 arasındadır. Her iki özelliğin kullanımı şahıslara atiitr ve W3C standartları tarafından desteklenmemektedir.


Bunun için yazılacak CSS style sayfası şudur:

[blockquote color=blue]<style type=\”text/css\”>

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 1px solid #ccc;
}

</style>[/blockquote]

Resim için HTML kodu:

[blockquote color=blue]<a class=\”toggleopacity\” href=\”http://www.trenderkekicgiyim.com\”><img src=\”https://www.bulanca.com/wp-content/uploads/2009/12/about.jpg\” width=\”48\” height=\”48\” /></a>[/blockquote]