WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

6月6日の作業データ（ホバーアニメーション）

2023年5月クラス

index.html

<!DOCTYPE html>
<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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>画像を使ったホバーアニメーション</h1>

<div class="wrapper">
<div class="photo-box">
<img src="img/01.jpg" alt="">
<div class="caption">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi, et!</p>
</div><!-- /.caption -->
</div><!-- /.photo-box -->

<div class="photo-box">
<img src="img/02.jpg" alt="">
<div class="caption2">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi, et!</p>
</div><!-- /.caption -->
</div><!-- /.photo-box -->


<div class="photo-box scale">
<img src="img/03.jpg" alt="">
</div><!-- /.photo-box -->

</div><!-- /.wrapper -->

</body>
</html>


style.css

@charset "utf-8";

*{
margin: 0;
padding: 0;
}
img{
vertical-align: bottom;
}

h1{
text-align: center;
margin: 40px 0;
}

.wrapper{
width: 980px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.photo-box{
position: relative;
overflow: hidden;
}

/* 1枚目の画像部分 */
.caption{
width: 300px;
height: 200px;
background-color: #00000066;
color: #FFF;
padding: 20px;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.5s;
}
.caption:hover{
opacity: 1;
}

/* 2枚目の画像 */
.caption2{
width: 300px;
height: 200px;
padding: 20px;
box-sizing: border-box;
background-color: #f2111166;
color: #FFF;
position: absolute;
top: 200px;
transition: 0.5s;
}
.photo-box:hover>.caption2{
top: 0;
}

/* 3枚目の画像 */
.photo-box.scale>img{
transition: 0.3s;
}
.photo-box.scale:hover>img{
scale: 1.2;
}