マウスを置いた（ホバーした）とき、文字や画像などの要素を拡大（要素サイズからはみ出た部分は非表示）したり暗くしたりする実装方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！
なお、画像サイズを拡大表示（要素自体を拡大）させる方法は以下記事で紹介しています。本記事と合わせてご覧ください。
あわせて読みたい
【JavaScript&CSS】クリック（タップ）で画像を拡大させる
transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…
目次
実装例
ホバー時にズーム
マウスカーソルを乗せると文字が拡大します。（領域から溢れた部分は非表示。）
HELLO WORLD
ホバー時に暗転
マウスカーソルを乗せると全体が暗くなり。
HELLO WORLD
ホバー時にズーム＆暗転
マウスカーソルを乗せると文字が拡大＆暗くなります。
HELLO WORLD
コード
- overflow: hidden;
-
要素の領域（ボックス）からはみ出た部分を非表示にするプロパティ。デフォルトでは「overflow: visible;」になっており、はみ出た部分も表示される。
- transform: scale(数値);
-
要素を拡大・縮小するプロパティ。()内の数値を「2」にすると2倍に、「0.5」にすると半分になる。
ホバー時にズーム
HTML/CSS コードはこちら
<div class="cover-box">
<div class="image-box">
<p>HELLO WORLD</p>
</div>
</div>.cover-box {
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
}
.image-box {
width: 100%;
height: 100%;
background: skyblue;
transition: transform 0.3s ease;
}
p {
margin: 0;
font-size: 20px;
line-height: 200px;
}
.image-box:hover {
transform: scale(1.6);
}ホバー時に暗転
HTML/CSS コードはこちら
<div class="cover-box">
<div class="image-box">
<p>HELLO WORLD</p>
</div>
<div class="dark-cover"></div>
</div>.cover-box {
width: 200px;
height: 200px;
text-align: center;
position: relative;
}
.image-box {
width: 100%;
height: 100%;
background: tomato;
transition: transform 0.3s ease;
}
p {
margin: 0;
font-size: 20px;
line-height: 200px;
}
.dark-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: .3;
transition: background-color 0.3s ease;
}
.dark-cover:hover {
background-color: black;
}ホバー時にズーム＆暗転
HTML/CSS コードはこちら
<div class="cover-box">
<div class="image-box">
<p>HELLO WORLD</p>
</div>
<div class="dark-cover"></div>
</div>.cover-box {
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
position: relative;
}
.image-box {
width: 100%;
height: 100%;
background: lime;
transition: transform 0.3s ease;
}
p {
margin: 0;
font-size: 20px;
line-height: 200px;
}
.image-box:hover {
transform: scale(1.6);
}
.dark-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: .3;
transition: background-color 0.3s ease;
pointer-events: none;
}
.image-box:hover + .dark-cover {
background-color: black;
}【おまけ】ホバー時に3Dアニメーション
ホバー時のアニメーションを立体的に行える、3DアニメーションもCSSで実装できます。
ホバーすると上からパタッと降りてくるようなアニメーション
Thank you for reading this article!
こちらの記事で紹介しています！
【CSS】画面奥から文字や画像を拡大 / 回転させる（3Dアニメーション）
この記事では、マウスをホバーしたときにテキストや図形を立体的に変化させるアニメーション（3Dアニメーション）の実装方法について紹介しています。自分の学習・メモ…