figure { width: 100%; margin: 0; padding: 0; background: #fff; overflow: hidden; } .hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } .hover02 figure img { -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; } .hover02 figure:hover img { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .hover03 figure img { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover03 figure:hover img { -webkit-transform: scale(1); transform: scale(1); } .hover04 figure img { -webkit-filter: brightness(50%); filter: brightness(50%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .hover04 figure:hover img { -webkit-filter: brightness(100%); filter: brightness(100%); } .hover05 figure img { border: 0; padding: 0; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .hover05 figure:hover img { width:auto; -webkit-transform: rotatex(-360deg); -webkit-transition-duration: 1.00s; -moz-transition-duration: 1.00s; transition-duration: 1.00s; } .hover06 figure img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover06 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } .hover07 figure img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover07 figure:hover img { -webkit-filter: blur(0); filter: blur(0); } .hover08 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover08 figure:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } .hover09 figure img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover09 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0); } .hover10 figure img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover10 figure:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } .hover11 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover11 figure:hover img { opacity: .5; } .hover12 figure { background: #ff1493; } .hover12 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover12 figure:hover img { opacity: .5; } .hover13 figure:hover img { opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s; } .hover14 figure { position: relative; } .hover14 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .hover14 figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } .hover15 figure { position: relative; } .hover15 figure::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255, 255, 255, .2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .hover15 figure:hover::before { -webkit-animation: circle .75s; animation: circle .75s; } .hover16 figure img { border: 0; padding: 0; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .hover16 figure:hover img { width:auto; -webkit-transform: rotateY(-360deg); -webkit-transition-duration: 1.00s; -moz-transition-duration: 1.00s; transition-duration: 1.00s } .hover17 figure img { border: 0; padding: 0; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .hover17 figure:hover img { -moz-transform: scale(1.2) rotate(-315deg);-webkit-transform: scale(1.2) rotate(-315deg);-o-transform: scale(1.2) rotate(-315deg);-ms-transform: scale(1.2) rotate(-315deg);transform: scale(1.2) rotate(-315deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .hover18 figure img { filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); omoz-filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; transition: all 0.7s linear; } .hover18 figure:hover img { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); -webkit-filter:hue-rotate(0deg); } @-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } }