<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ホバーアニメーション</title>
<style>
html,body,h1,h2,p{
margin: 0;
padding: 0;
}
img{
vertical-align: bottom;
}
h1{
text-align: center;
margin: 50px 0 30px;
}
.wrapper{
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.photo-box{
width: 300px;
position: relative;
overflow: hidden;
}
.caption{
width: 300px;
height: 200px;
background-color: rgba(0,0,0,0.5);
color: #FFF;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.2s;
}
.caption:hover{
opacity: 1;
}
.caption2{
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 200px;
background-color: rgba(0,0,0,0.5);
color: #FFF;
transition: 0.2s;
}
.photo-box:hover>.caption2{
left: 0;
}
.photo-box>.img-03{
transition: 0.2s;
}
.photo-box:hover>.img-03{
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Hover-animation</h1>
<div class="wrapper">
<div class="photo-box">
<img src="img/01.jpg" alt="">
<div class="caption">
<h2>商品名</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, obcaecati?</p>
</div>
</div>
<div class="photo-box">
<img src="img/02.jpg" alt="">
<div class="caption2">
<h2>商品名</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, obcaecati?</p>
</div>
</div>
<div class="photo-box">
<img class="img-03" src="img/03.jpg" alt="">
</div>
</div>
</body>
</html>
