Minden esetben, ha linkelt képnél szeretnéd alkalmazni az effekteket úgy, hogy ha ráviszed az egeret, akkor változzon, akkor a kódrészt ebbe a részbe kell beillesztened:

a:link img, a:visited img {
ide jön a kódrész
}
a:hover img {
ide jön a kódrész
}

<style type="text/css">
img {
    background-color: #ffffff;
    padding: 10px;
    border: 0px;
    box-shadow: none;
    filter: alpha(opacity=100); /* Kép elhalványítása */
    opacity: 10; /* Kép elhalványítása */
    background: url('/images/scripts/image-effects/011.gif');
    background-position: top right;
    margin: 0px;
    -moz-transition-property: background-position;
    -moz-transition-duration: 5s;
    -webkit-transition-property: background-position;
    -webkit-transition-duration: 5s;
    -o-transition-property: background-position;
    -o-transition-duration: 5s;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    border-radius: 0px;
}
img:hover {
    padding: 10px;
    background-color: #ffffff;
    border: 0px;
    background: url('/images/scripts/image-effects/012.jpg');
    background-position: bottom left;
    margin: 0px;
    -moz-transition-property: background-position;
    -moz-transition-duration: 5s;
    -webkit-transition-property: background-position;
    -webkit-transition-duration: 5s;
    -o-transition-property: background-position;
    -o-transition-duration: 5s;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    border-radius: 0px;
}
</style>

1 178 megtekintés