CSSを使ってマウスオーバー(hover)で画像の拡大する

transform:scale(1.3)

マウスオーバーのアクションは色を反転させたり、少し透明にしたりいろんなアクションがあります。今回はCSSだけを使いマウスオーバー(hover)時に画像が拡大するアクションを紹介します。

Javascriptを使わないのでやり方は簡単。マウスオーバーする要素に画像を入れ「transform:scale(1.3)」を追加する。アニメーションにしたいので値の変化をアニメーションさせる「transition-duration」を使う。

<div class="Contents">
  <div class="Contents__img">
    <a class="is-hover-scale" href="sample.html">
     <dl class="ImgTextBox">
       <dt class="ImgTextBox__wrap is-overflow-hidden">
        <img class="ImgTextBox__wrap-img" src="sample.jpg" alt="わんこ">
       </dt>
       <dd class="ImgTextBox__text">hoverすると画像が拡大するサンプル</dd>
     </dl>
   </a>
  </div>
</div>

SCSS

.ImgTextBox{
	width: 500px;
	margin: 20px;
	padding: 20px;
	border: 1px solid #666;
	&__wrap{
		width: 100%;
	}
	&__text{
		padding: 15px;
		font-size: 20px;
		text-align: center;
	}
}
//hover
.is-hover-scale{
	&:hover{
		img{
			transform:scale(1.3);
			transition-duration: 0.3s;
		}
	}
}
.is-overflow-hidden{
	overflow: hidden;
}

CSS

.ImgTextBox {
  width: 500px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #666;
}
.ImgTextBox__wrap {
  width: 100%;
}
.ImgTextBox__text {
  padding: 15px;
  font-size: 20px;
  text-align: center;
}
.is-hover-scale:hover img {
transform: scale(1.3);
transition-duration: 0.3s;
}
.is-overflow-hidden {
overflow: hidden;
}

使用方法

追加するとこんな感じ

上記のように黒くする方法

クラス「is-overflow-hidden」を追加した要素にクラス「-bg-black」を追加。クラス「is-hover-scale」を追加した要素にクラス「-opacity」を追加。

html

<div class="Contents">
  <div class="Contents__img">
    <a class="is-hover-scale -opacity" href="sample.html">
     <dl class="ImgTextBox">
       <dt class="ImgTextBox__wrap is-overflow-hidden -bg-black">
         <img class="ImgTextBox__wrap-img" src="sample.jpg" alt="わんこ">
       </dt>
       <dd class="ImgTextBox__text">hoverすると画像が拡大するサンプル</dd>
     </dl>
   </a>
  </div>
</div>

CSS

.ImgTextBox {
  width: 500px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #666;
}
.ImgTextBox__wrap {
  width: 100%;
}
.ImgTextBox__text {
  padding: 15px;
  font-size: 20px;
  text-align: center;
}
.is-hover-scale:hover img {
transform: scale(1.3);
transition-duration: 0.3s;
}
.is-hover-scale.-opacity:hover img {
opacity: 0.6;
}
.is-overflow-hidden {
overflow: hidden;
}
.is-overflow-hidden.-bg-black {
  background: #000;
}

SCSS

.ImgTextBox{
	width: 500px;
	margin: 20px;
	padding: 20px;
	border: 1px solid #666;
	&__wrap{
		width: 100%;
	}
	&__text{
		padding: 15px;
		font-size: 20px;
		text-align: center;
	}
}
.is-hover-scale{
	&:hover{
		img{
			transform:scale(1.3);
			transition-duration: 0.3s;
		}
	}
	&.-opacity{
		&:hover{
			img{
				opacity: 0.6;
			}
		}
	}
}
.is-overflow-hidden{
	overflow: hidden;
	&.-bg-black{
		background: #000;
	}
}