<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

12月
13
全日 信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
12月 13 – 12月 24 全日
信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
期間:12月13日(金)~12月24日(火)※要予約 時間:信楽駅9:46発→貴生川駅10:09着 貴生川駅10:24発→信楽駅10:48着 信楽駅10:54発→貴生川駅11:17着 貴生川駅11:24発→信楽駅10:48着 料金:大人940円、小人480円(大人一人につき未就学児2名無料) サンタさんと遊んでプレゼントをもらおう! 予約先:信楽高原鐵道株式会社 TEL0748-82-4366
12月
21
全日 NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
12月 21 2019 – 3月 28 2020 全日
NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
会期:12月21日(土)~令和2年3月28日(土)9:00~17:00 場所:信楽伝統産業会館(甲賀市信楽町長野1142) ※入場無料 焼き物の里・信楽を舞台に、女性陶芸家の波乱万丈な人生を描く「スカーレット」。 写真や収録に使用した小道具、衣装、フォトスポット等でその魅力をご紹介します。 問い合わせ:信楽伝統産業会館 TEL0748-82-2345
1月
11
全日 NHK連続テレビ小説「スカーレット... @ 土山SA下り
NHK連続テレビ小説「スカーレット... @ 土山SA下り
1月 11 – 3月 28 全日
NHK連続テレビ小説「スカーレット」パネル展 @ 土山SA下り
期間:1月11日(土)~3月28日(土)の土日祝のみ 場所:新名神高速道路土山サービスエリア下り線側観光案内所ブース 甲賀市を舞台に女性陶芸家の人生を描く「スカーレット」。 1月からもますます盛り上がるドラマを紹介するパネル展示やVTR上映をします。

LOCAL LINK

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