【CSS】マウスホバーで画像を拡大する方法

今回はCSSだけでできる、マウスがホバーした時に画像を拡大する方法を紹介します。

マウスホバーした時に画像を拡大するにはtransform: matrix3dを使います。

 

HTMLとCSS

HTMLは拡大したい画像をclass=”background-image”に入れて、外側をdivで囲っただけです。

<div class="box-main-photo">
  <div class="background-image"></div>
</div>

 

CSSのwidthやheightは自由に変更して構いません。

.box-main-photo {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.background-image{
  position: absolute;
  width: 100%;
  height: 500px;
  background: url("http://rfs.jp/wp-content/themes/smart/i/photo/P6JB59WSR2.jpg") #f0f1f6 no-repeat center center;
  background-size: cover;
  transition: all 0.5s ease-out;
  transform: matrix3d(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
  );
  will-change: transform;
}
.background-image:hover {
  transform: matrix3d(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 0.9
  );
}

 

上記のコードのコピペでokです。

 

画像の上に文字を乗せたい場合

画像の上に文字を乗せたい場合はHTMLとCSSに以下の要素を追加します。

HTML

<div class="box-main-photo">
  <header class="entry-header">
    title
  </header>
  <div class="background-image"></div>
</div>

 

CSS

.entry-header {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 500px;
 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20pt;
  color: #fff;
  z-index:1;
}

 

文字はposition: absoluteで絶対配置にし、display: flexでフレックスボックスにしてjustify-content: centerとalign-items: centerで画像の中央に配置されるようにしましょう。