Image Hover Effect – change opacity | CSS Opacity (Saydamlık) ve Hover Kodu

A small CSS code changes the opacity level of the images, whenever you place the mouse cursor over these images.

In css, copying the following code:

<style type=”text/css”>

a.imgopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.imgopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

Add this class to <a> tag, to call for the effect.

<a class=”imgopacity” href=”http://xxxxxx” target=”_blank”><img src=”xxxxx” />

You may see some examples here.

DEMO

Alıntıdır : http://5ewebdesign.com/WordPress/developement-resources/image-hover-effect-change-opacity
ALINTI 2 : http://www.bilalucar.net/2012/09/css-opacity-saydamlk-ve-hover-kodu.html

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s