<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;」を指定することで、画像拡大時のはみ出し部分を隠されるようになっています。
ぜひお試しあれ!

 

EVENT

5月
31
終日 しがのフォトコン!!2021
しがのフォトコン!!2021
5月 31 2021 – 2月 14 2022 終日
しがのフォトコン!!2021
びわこビジターズビューローが開催するフォトコンテストが始まりました。 滋賀ならではの絶景写真や心和む身近な風景写真など、滋賀を好きになる作品のご投稿を送って素敵なものをGETしましょう! テーマは「魅力ある滋賀」 身近な所で見つけたとっておきの風景や紹介したくなる滋賀の四季を収めた写真が随時UPされています。 ぜひ素敵な一枚を送ってみましょう。 募集期間:2021年05月31日~2022年02月14日 応募規約:こちらから確認いただけます 入賞賞品:フォトコンテストには、滋賀県内各地の市町・観光協会が協賛。 入賞者には地元スイーツや観光チケットなど、滋賀県各地からの逸品をプレゼント♪ しがのフォトコン詳細ページ

LOCAL LINK

PROMOTION VIDEO

にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ

Access

  • 524,129
PAGE TOP