CSS Animation - hover Effect4

<div class="hover_wrap">
	<div class="effect hover7">
		<figure class="front">
			<img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover16.jpg" alt="이미지">
			<figcaption>
				<h3>Mouse Hover Effect05</h3>
				<p>마우스 오버 효과입니다.</p>
			</figcaption>
		</figure>
		<figure class="back">
			<img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover17.jpg" alt="이미지">
			<figcaption>
				<h3>Mouse Hover Effect05</h3>
				<p>마우스 오버 효과입니다.</p>
			</figcaption>
		</figure>
	</div>
	<div class="effect hover8">
		<figure class="front">
			<img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover18.jpg" alt="이미지">
			<figcaption>
				<h3>Mouse Hover Effect06</h3>
				<p>마우스 오버 효과입니다.</p>
			</figcaption>
		</figure>
		<figure class="back">
			<img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover19.jpg" alt="이미지">
			<figcaption>
				<h3>Mouse Hover Effect06</h3>
				<p>마우스 오버 효과입니다.</p>
			</figcaption>
		</figure>
	</div>
</div>

body {
	font-family: 'BMJUA'; 
	height: 100vh;
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hover_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
  perspective: 1000px;
}
.hover_wrap .effect {
  position: relative;
  width: 400px; height: 300px; margin: 10px;
}
.hover_wrap .effect .front {
  position: absolute; left:0; top:0; z-index: 10;
}
.hover_wrap .effect .back {
  position: absolute; left:0; top:0;
}

.hover_wrap .effect figcaption {
  position: absolute; bottom:0; left: 0;
  background: rgba(0,0,0,0.5);
  width: 100%; padding: 3%, 4%;
  box-sizing: broder-box;
  color: #fff;
}

.hover_wrap .effect figcation h3 {
  font-size: 24px; padding-bottom: 5px;
}
.hover_wrap .effect figcation p {
  font-size: 20px;
}

.hover_wrap .effect img {
  width: 100%; display: block;
}

/* media query */
@media (max-width:600px){
  .hover_wrap {flex-direction: column;}
}
/* hover effect1 */
.hover_wrap .effect.hover7 .front {
  transform: rotatey(0deg);
  transition: transform 1s;
  backface-visibility: hidden;
}
.hover_wrap .effect.hover7:hover .front {
  transform: rotatey(180deg);
}
.hover_wrap .effect.hover7 .back {
    transform: rotatey(-180deg);
  transition: transform 1s;
}

.hover_wrap .effect.hover7:hover .back {
    transform: rotatey(0deg);
}

/* hover effect2 */
.hover_wrap .effect.hover8 .front {
  transform: rotatex(0deg);
  transition: transform 1s;
  backface-visibility: hidden;
}
.hover_wrap .effect.hover8:hover .front {
  transform: rotatex(180deg);
}
.hover_wrap .effect.hover8 .back {
    transform: rotatex(-180deg);
  transition: transform 1s;
}

.hover_wrap .effect.hover8:hover .back {
    transform: rotatex(0deg);
}