<CSS>hoverした時に画像を拡大する方法

マウスを持ってきた時にブワーっと大きくなる画像の作り方を紹介します。
下の画像にカーソルを合わせてみてください。

 
CSSデータ

.expansion {
overflow: hidden; /*拡大時にはみ出た部分を隠す*/
width: 500px; /*画像の幅*/
height: 100px; /*画像の高さ*/
}
.expansion img {
display: block;
transition-duration: 0.3s; /*変化に掛かる時間*/
}
.expansion img:hover {
transform: scale(1.1); /*画像の拡大率*/
transition-duration: 0.3s; /*変化に掛かる時間*/
}

HTMLデータ

<div class=”expansion”>
<img src=”https://thumbs.jp/testexpansion.jpg” />
</div>

画像を内包する「.expansion」に「overflow:hidden;」を指定することで、画像拡大時のはみ出し部分を隠されるようになっています。
ぜひお試しあれ!

 

TOPICS

  1. 映像作品を通じて、甲賀市の景観・歴史・文化などの魅力を市内外へ発信するとともに、若手…
  2. 貴生川エリアプラットフォームとは?私の住んでいる甲賀市の貴生川駅周辺特区構想に位置づけられた施策…
  3. 朝5時に到着し、周りが見えないぐらいの霧の中ハイキング開始!今回で5週連続のガスで、とことん運が…
  4. コーヒーは、どのドリップ方法で作るか、どのドリッパーで作るかで大きく味が変わってきます。なので好…
  5. コーヒー好きが高じて以前は家庭用の焙煎機まで持っていたのですが、焙煎の難しさにいつも悩まされていまし…
にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP