Cooper ügynök : CSS – effektek kép hivatkozáson

2015. január 2., péntek

CSS – effektek kép hivatkozáson

CSS 3 segítségével különböző effekteket helyezhetünk hivatkozásra. Képeken látványos lehet és javasrciptet is megspóroljuk.

Legutóbb egy olyan megoldást készítettem, hogy a kép fekete-fehér, de ha rávisszük az egeret színes lesz.

A képen lévő hivatkozásba be kell írni: class="eff"

<a class="eff" href="hivatkozas"><img src="kep.jpg"></a>

Majd az oldal .css fájljába be kell másolni a következő sorokat:

.eff img{
-webkit-filter: grayscale(1);
border-radius: 50%;
}
.eff:hover img{
-webkit-filter: none;
}

Az .eff img adja meg az alap képet.

-webkit-filter: grayscale(1);

Ez a sor leveszi a színeket a képről.

border-radius: 50%;

A négyzet képet lekerekíti.

Az .eff:hover img-nél megadott tulajdonságok akkor jelentkeznek ha rávisszük az egeret.

-webkit-filter: none;
Ez a rész visszaadja a színeket a képhez.

Bal oldali kép az eredeti állapot, a jobb oldali pedig mikor rávisszük az egeret:

A következő css kód pedig elhalványítja a képet:

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