【CSS】マウスを乗せた（ホバーした）時、サムネイル画像を拡大・縮小する方法
このように記事のリストのサムネイル画像を、マウスをホバーした時に、画像を拡大したり、縮小したりする方法を紹介します。
共通のHTML
まずは共通のHTML
HTML
<div class="content">
<ul class="articles">
<li>
<a href="">
<div class="thumbnail">
<img src=".jpg" alt="" />
</div>
<h2>記事1タイトル</h2>
<p>記事1コンテンツコンテンツコンテンツ</p>
</a>
</li>
<li>
<a href="">
<div class="thumbnail">
<img src=".jpg" alt="" />
</div>
<h2>記事2タイトル</h2>
<p>記事2コンテンツコンテンツコンテンツ</p>
</a>
</li>
<li>
<a href="">
<div class="thumbnail">
<img src=".jpg" alt="" />
</div>
<h2>記事3タイトル</h2>
<p>記事3コンテンツコンテンツコンテンツ</p>
</a>
</li>
</ul>
</div>ホバーすると拡大
- 親要素にはoverflow: hiddenとposition: relative
-
子要素（img）には、
position:absoluteと
top: 50%;
left: 50%;
transform: translate(-50%, -50%); -
<li>..</li>をホバーしたら、
transform: translate(-50%, -50%) scale(1.2);
.content .articles > li .thumbnail {
height: 120px;
position: relative;
overflow: hidden;
}
.content .articles img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.content .articles > li a:hover .thumbnail img {
transform: translate(-50%, -50%) scale(1.2);
}.jpg)
.jpg)
.jpg)
ホバーすると縮小
- 親要素にはoverflow: hiddenとposition: relative
-
子要素（img）には、
position:absoluteと
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.2); -
<li>..</li>をホバーしたら、
transform: translate(-50%, -50%);
.content .articles > li .thumbnail {
height: 120px;
position: relative;
overflow: hidden;
}
.content .articles img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.2);
transition: 0.3s;
}
.content .articles > li a:hover .thumbnail img {
transform: translate(-50%, -50%);
}
親要素にはoverflow: hiddenとposition: relative
拡大するには、ホバーした時に、
transform: scale(1.2);
縮小するには、ホバーする前の画像に、
transform: scale(1.2);
ホバーした時に、
transform: scale(1.2);の指定を外す。
