Effets CSS Images

.$ {-webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{-webkit-transform: scale(1.1); transform: scale(1.1);}

.$ { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .$:hover{ -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }

.$ {-webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{ -webkit-transform: scale(0.80); transform: scale(0.80);}

.$ {margin-left: 0px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover img { margin-left: -30px; }

.$ { -webkit-filter: blur(0); filter: blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{ -webkit-filter: blur(4px); filter: blur(4px); }

.$ {-webkit-transform: rotate(10deg) scale(1.0); transform: rotate(10deg) scale(1.0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{ -webkit-transform: rotate(0) scale(0.8); transform: rotate(0) scale(0.8);}

.$ {animation: hu__hu__ infinite 2s ease-in-out} @keyframes hu__hu__ {50% { transform: translateY(30px)}}

.$ {animation: huhu infinite 2s ease-in-out} @keyframes huhu {50% { transform: translateX(30px)}}

.$ {-webkit-filter: grayscale(0); filter: grayscale(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{ -webkit-filter: grayscale(100%); filter: grayscale(100%); }

.$ {-webkit-filter: sepia(0); filter: sepia(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{ -webkit-filter: sepia(100%); filter: sepia(100%); }

.$ { -webkit-filter: blur(5px); filter: blur(5px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .$:hover{ -webkit-filter: blur(0); filter: blur(0);}

.$:hover{opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s;} @-webkit-keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}} @keyframes flash {0% { opacity: .4;} 100% {opacity: 1;}}

.${-webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .$:hover{ -webkit-filter: saturate(4); }

.$ {-webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .$:hover { -webkit-filter: contrast(160%); }

.$ {-webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .$:hover { -webkit-filter: brightness(0.25); }

.$ {-webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .$:hover { -webkit-filter: brightness(2); }

.$ {-webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .$:hover { -webkit-filter: invert(100%); }

.$ {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;} .$:hover{ opacity:0.6; filter: alpha(opacity=60); }

.$ { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .$:hover{ transform:rotate3d(0,1,0,180deg); }

.$ { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .$:hover{ transform:rotate3d(0,1,0,360deg); }

.$ { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .$:hover{ transform:rotate3d(0,0,1,180deg); }

.$ {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .$:hover{ -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); }

.$ :hover {border-radius: 140px;}

.$ {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .$:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); }

.$:hover{animation-name: shake; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in;} @keyframes shakeAnim {0% {left: 0}1% {left: -3px}2% {left: 5px}3% {left: -8px}4% {left: 8px}5% {left: -5px}6% {left: 3px}7% {left: 0}}

.$ { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .$:hover{ -webkit-transform: translateY(8px); transform: translateY(8px); }

.$ { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .$ :hover{ -webkit-transform: skew(2deg); transform: skew(2deg); }

.$ { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .$ :hover{ -webkit-transform: skew(-2deg); transform: skew(-2deg); }

.wa-image-wrap:hover .wa-image-second-inner {transition: transform 7s;}

.$ { border-width:3px; border-style:dashed; border-color:black; }

.$ { border-width:5px; border-style:double; border-color:black; }

.$ { border-width:3px; border-style:dotted; }

.$ { border-width:4px 4px 4px 4px; border-style:solid dotted; }

.$ { border-width:5px 3px 5px 3px; border-style:double solid; }

.$:hover{ border-width:3px; border-style:dashed; border-color:black; }

.$:hover{ border-width:5px; border-style:double; border-color:black; }

.$:hover{ border-width:3px; border-style:dotted; }

.$:hover{ border-width:5px 3px 5px 3px; border-style:double solid; }

.$:hover{ border-width:4px 4px 4px 4px; border-style:solid dotted; }