【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法

共通の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);
}
ホバーすると縮小
- 親要素には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);の指定を外す。
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには? brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで3Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について
【CSS】animation のアニメーションの動き(time-function),遅延時間(delay),方向(direction)について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。