.hover1 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover1 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); }
.hover1 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover1 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); }
.hover2 figure img { width: 700px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover2 figure:hover img { width: 400px; }
.hover3 figure img { margin-left: 100px; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover3 figure:hover img { margin-left: 0; }
.hover4 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; } .hover4 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); }
.hover5 figure img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } .hover5 figure:hover img { -webkit-filter: blur(0); filter: blur(0); }
.hover6 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover6 figure:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.hover7 figure img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover7 figure:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); }
.hover8 figure img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .5s ease-in; transition: .5s ease-in; } .hover8 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0); }
.hover9 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover9 figure:hover img { opacity: .5; }
.hover10 figure { background: #7900eb; } .hover10 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover10 figure:hover img { opacity: .3; }
.hover11 figure:hover img { 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; } }