Képeffektek

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.