Képeffektek : Linkelt kép megfordul és kör alakú lesz, ha ráviszed az egeret |
Linkelt kép megfordul és kör alakú lesz, ha ráviszed az egeret
CSS kód
<style type="text/css">
a:link img, a:visited img {
background-color: #f1ebd7;
padding: 6px;
border: 0px;
filter: alpha(opacity=100); /* Kép elhalványítása */
opacity: 10; /* Kép elhalványítása */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:hover img {
cursor: default;
background-color: #EAF4F7;
padding: 6px;
border: 0px;
filter: alpha(opacity=80); /* Kép elhalványítása */
opacity: .8;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
--> </style>
Ha azonos szélességű és magasságú képre viszed az egeret, akkor kör alakú lesz a kép, ha téglalap alakúra viszed az egeret, akkor pedig ovális lesz :)
|