サムネイル画像がマウスホバーで拡大するアニメーションのHTMLとCSSの書き方のポイントを紹介します。
目次
HTMLとCSS
見本（CodePen）
サムネイル画像がマウスホバーで拡大するアニメーションの見本をCodePenに載せておきます。アニメーションの動作やコードをご確認下さい。
See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.
HTML
サムネイル画像がホバーで拡大するアニメーション用のHTML記述例を下に載せておきます。
<body>
<div class="base-container">
<!-- サムネイルを囲うタグ -->
<div class="thumbnail-wrapper">
<!-- サムネイル画像 -->
<img src="https://shimizu-create.com/wp-content/uploads/2023/08/city-55kb@2x.jpg" alt="サムネイル画像" class="thumbnail-img">
</div>
</div>
</body>コード解説
必要なタグは次の２つだけです。
- サムネイル画像を囲うタグ
- サムネイル画像のimgタグ
CSS
サムネイル画像がマウスホバーで拡大するアニメーション用のCSS記述例を下に載せておきます。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
.base-container{
padding: 50px 20px;
}
/* サムネイル画像を囲うタグ */
.thumbnail-wrapper{
max-width: 300px;
max-height: 200px;
margin: 0 auto;
overflow: hidden;
}
/* サムネイル画像のimgタグ */
.thumbnail-img{
object-fit: contain;
width: 100%;
height: 100%;
transition: all .6s ease;
}
@media (hover: hover) {
.thumbnail-wrapper:hover .thumbnail-img {
transform: scale(1.1);
}
}コード解説
HTMLで作った２つのタグに対してCSSを書きます。
- サムネイルを囲うタグ：widthとheightを設定した上で、overflow: hidden;として下さい。これにより画像が拡大した時にはみ出た部分が隠れます。
- サムネイル画像のimgタグ：widthとheightを100%に設定した上で、transition: all .6s ease;として下さい。これによりアニメーションの動きがスムーズになります。.6sはアニメーションにかかる時間です。object-fit: contain;は必須ではありませんがサムネイル画像に余白が生じないための処置です。
- サムネイル画像のimgタグのマウスホバーアニメーション：transform: scale(1.1);として下さい。カッコ内の数字は拡大率です。ここにopacityで透過度を合わせてアニメーションさせる場合も多いです。
WordPressの場合
テンプレートファイルに特に指定はありませんが、この記事ではカスタム投稿タイプのアーカイブページを例に記述例を紹介します。
PHP（archive-$posttype.php）
<!-- 前略：ループ設定など -->
<li class="service-wrapper-archive">
<a href="<?php the_permalink(); ?>" class="service-wrapper-a">
<div class="service-wrapper">
<!-- サムネイル -->
<div class="service-img-wrapper">
<?php the_post_thumbnail('medium'); ?>
</div>
<!-- タイトルと要旨は省略 -->
</div>
</a>
</li>CSS（Sass）
WordPressの場合にはサムネイル画像をWordPress関数で読み出しているため、Chromeのデベロッパーツール等で関係するタグのクラス属性を特定してCSSを書く必要があります。
たとえば、この事例の場合、サムネイル画像のimgタグにはWordPressによって「wp-post-image」というクラス属性がWordPressによって自動的に割り当てられているため、そのクラス属性に対してhoverのCSSを書いています。
CSS設定の方法
画像拡大のCSSの原理自体は、HTML・CSS設定と同様に下記のとおりです。
CSS設定のポイント
- サムネイルのimgタグ：widthとheightを100%に設定した上で、transition: all .6s ease; と objectfit: cover; →必須ではない
- サムネイル画像を囲うタグ：widthとheightを設定した上で、overflow: hidden;
- マウスホバー設定：transform: scale(1.1);
CSS記述例
下に記述例を載せておきます。
// サムネイル画像ファイル
.service-img-wrapper img{
width: 100%;
height: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 10px 0px 0px 10px;
@include fw.mq("sp") {
width: 100%;
height: 150px;
border-radius: 10px 10px 0px 0px;
}
}
// サムネイル画像を囲うタグ
.service-img-wrapper{
background-color: fw.$line-gray;
height: 100%;
width: 100%;
border-radius: 10px 0px 0px 10px;
overflow: hidden;
@include fw.mq("sp") {
border-radius: 10px 10px 0px 0px;
}
}
// マウスオーバーで画像拡大
.wp-post-image{
transition: all .6s ease;
}
@media (hover: hover) {
.service-wrapper-a:hover .wp-post-image {
transform: scale(1.1);
opacity: 0.6;
}
}
