Helló bloggerek és bloggerinák!
Gondoltam megleplek titeket pár képeffektel.Szerintem hasznosak,és kipróbálni is megéri.Mivel nem saját(hanem Lindadesign készítette),ezért illene írni forrást!
A kódok 100% -ban dolgoznak,mert mindegyik ki van próbálva!
Aki elakadt,az sikítson! :)
Képnek dupla keret
<style type="text/css">
img {
background-color: #BCC79F; /* belső keret színe */
padding: 7px; /* belső keret pixelben */
border: 7px solid #D93033; /* külső keret színe és mérete pixelben */
filter: alpha(opacity=100); /* Kép elhalványítása IE */
opacity: 10; /* Kép elhalványítása Mozilla */
}
img:hover {
cursor: default;
background-color: #BCC79F;/* belső keret színe */
padding: 7px; /* belső keret pixelben */
border: 7px solid #D93033; /* külső keret színe és mérete pixelben */
filter: alpha(opacity=80); /* Kép elhalványítása */
opacity: .8;
}
--></style>
Kép mérete megváltozik
<style type="text/css">
img {
-webkit-transition: 1s;
-moz-transition: 1s ;
transition: 1s ;}
img:hover {
-webkit-transform:scale(.857);
-moz-transform:scale(.857);
-o-transform:scale(.875);
-webkit-filter: grayscale(30%);
-webkit-transition: 1s;}
--></style>
Kép megfordul és eltűnik
<style type="text/css">
img {-webkit-transition: 1s;
-moz-transition: 1s ;
transition: 1s ;
}
img:hover { border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
filter: alpha(opacity=0);
opacity: .0;
}
--></style>
Linkelt kép eltűnik
<style type="text/css">
a:link img, a:visited img {
-webkit-transition: 0.3s;
-moz-transition: 0.3s ;
transition: 0.3s ;
}
a:hover img {
filter: alpha(opacity=0);
opacity: .0;
border-radius: 50%;
}
--></style>
Ha elakadtatok sikítsatok!
Pusszancs:
Stephanie P.
