CSS/画像hoverアクション

.sample {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 20px 20px;
  cursor: pointer;
}

#sample1:after {
  position: absolute;
  z-index: 1;
  content: "";
  top: 50%;
  left: 50%;
  width: 0%;
  height: 0%;
  transition: 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#sample1:hover:after {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0,0,0,.3);
}

#sample2:after {
  position: absolute;
  z-index: 1;
  content: "";
  top: 50%;
  left: 50%;
  width: 0%;
  height: 0%;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#sample2:hover:after {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0,0,0,.3);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

#sample3 img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#sample3:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

#sample4 img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#sample4:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

#sample5 img {
	margin-left: 30px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#sample5:hover img {
	margin-left: -100px;
	margin-top: 100px;
}

#sample6 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;
}
#sample6:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

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

#sample8 {
	position: relative;
}
#sample8::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;
}
#sample8:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-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;
	}
}

#sample9 {
	position: relative;
}
#sample9::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);
}
#sample9:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}