ホバーした時にCSSだけで出来る様々な画像切り替え方法

この記事は約17分で読めます。

CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。
色んなパターンの画像切り替えサンプルを用意しますので、まずは基本のHTMLを。
このHTMLを書いて2枚画像を用意して、目的のCSSをコピペすれば同じ動きになります。
沢山サンプルがあって長くなってしまい申し訳ないです。

基本のHTML

<div class="btn">
  <a href="https://hajimete.org/">
    <img src="btn_img1.jpg" alt="ボタン画像1" />
    <img src="btn_img2.jpg" alt="ボタン画像2" />
  </a>
</div>

フェードで切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
	opacity: 0;
}

上から重なって切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
	top: -100%;
}
.btn:hover img:nth-of-type(2) {
	top: 50%;
}

下から重なって切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
	top: 200%;
}
.btn:hover img:nth-of-type(2) {
	top: 50%;
}

右から重なって切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
	left: 200%;
}
.btn:hover img:nth-of-type(2) {
	left: 50%;
}

左から重なって切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
	left: -100%;
}
.btn:hover img:nth-of-type(2) {
	left: 50%;
}

上にフェードして切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
	top: 0%;
  opacity: 0;
}

下にフェードして切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
	top: 100%;
  opacity: 0;
}

右にフェードして切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
	left: 100%;
  opacity: 0;
}

左にフェードして切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
	left: 0%;
  opacity: 0;
}

拡大しつつフェードして切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
  -webkit-transform: translate(-50%, -50%) scale(1.15) !important;
	transform: translate(-50%, -50%) scale(1.15) !important;
  opacity: 0;
}

縮小しつつフェードして切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
  -webkit-transform: translate(-50%, -50%) scale(.8) !important;
	transform: translate(-50%, -50%) scale(.8) !important;
  opacity: 0;
}

回転して切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn:hover img:nth-of-type(2) {
  -webkit-transform: translate(-50%, -50%) rotate(720deg) !important;
	transform: translate(-50%, -50%) rotate(720deg) !important;
  width: 0;
}

下に画像がズレて切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn img:nth-of-type(1) {
  top: -100%;
}
.btn img:nth-of-type(2) {
  top: 0;
}
.btn:hover img:nth-of-type(1) {
  top: 0;
}
.btn:hover img:nth-of-type(2) {
  top: 100%;
}

横に画像がズレて切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn img:nth-of-type(1) {
  left: 100%;
}
.btn img:nth-of-type(2) {
  left: 0;
}
.btn:hover img:nth-of-type(1) {
  left: 0;
}
.btn:hover img:nth-of-type(2) {
  left: -100%;
}

四角がボヨ~ンとデカくなりフェードで切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
  -webkit-transition: .6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  display: block;
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}
.btn:hover {
  -webkit-transform: scale(1.3);
	transform: scale(1.3);
}
.btn:hover img:nth-of-type(2) {
  opacity: 0;
}

四角がボヨ~ンと小さくなりフェードで切り替わるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
  -webkit-transition: .6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  display: block;
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}
.btn:hover {
  -webkit-transform: scale(.7);
	transform: scale(.7);
}
.btn:hover img:nth-of-type(2) {
  opacity: 0;
}

もっと見たい方は、新しく「ホバーした時にCSSだけで出来る様々な画像切り替え方法|その2」をまとめましたのでよかったら見てください!

ボタンを横並びにする

★追記★
アガサさんコメントいただきありがとうございます!
ボタンを横並びにする場合は、CSSで「.btn」に「display: inline-block;」を追加すると横並びになります。
さらにそのままだと、ボタンがくっついてかっこ悪いから「margin」で少し余白を持たせます。

DEMO

ボタン画像1
ボタン画像2
ボタン画像1
ボタン画像2
ボタン画像1
ボタン画像2

CSS

.btn {
	position: relative;
	width: 220px;
	height: 70px;
	margin: 0 2% 0 0; // marginで余白を持たせる
	display: inline-block; // 「display」を「block」から「inline-block」へ変更
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	-webkit-transition: .6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:last-child {
	margin-right: 0; // 最後のボタンの余白を消します
}
.btn img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  	display: block;
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}
.btn:hover {
	-webkit-transform: scale(.8);
	transform: scale(.8);
}
.btn:hover img:nth-of-type(2) {
	opacity: 0;
}
CSS

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

  1. 上田 ヒロユキ より:

    こんにちは。
    2種類のサイズのボタンに同じエフェクトを追加しようと思い、
    クラス名をとに、
    CSSを
    btn2 {
    position: relative;
    width: 300px;
    height: 60px;
    margin: 0 auto;
    display: block;
    border-radius: 0px;
    overflow: hidden;
    cursor: pointer;
    }
    .btn2 img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    display: block;
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    }
    .btn2:hover img:nth-of-type(2) {
    opacity: 0;
    }
    にしましたが、btn2がうまく動作しません。
    どこが間違っているか教えていただけませんか

    • コメントありがとうございます!
      添付頂いたCSSを実際に表示してみましたが、
      最初のbtn2を指定する際に「.」が抜けていて上手く表示できないようでした!
      それ以外は問題ありませんでした☆彡

      サイト制作がんばってください!!
      応援しています!
      また何かわからない所が有れば、ブログ記事に関係なく
      お問い合わせフォームから聞いてくださいね!

    • 上田 ヒロユキ より:

      修正したら治りました。
      大変助かりました。

  2. より:

    スマホでホバーしてしまうのを避けたいのですが、どのような記述にしたらよいでしょうか?
    メディアクエリを設定してもホバーしてしまいます…><

    • コメントしていただきありがとうございます!
      スマホでホバーを避ける場合、メディアクエリで「:hover」を上書きすればできます!
      または、PCの時だけに「:hover」アクションを追加すれば、スマホでは動かなくなります!

      最初の「フェードで切り替わるボタン」を例としてあげてみます。

      —————————————————————

      【①メディアクエリでスマホのみホバーアクションを停止する】
      @media (max-width: 768px) {
      .btn:hover img:nth-of-type(2) {
      // スマホでホバーした際に、値を動かさない様上書き指定する
      opacity: 1;
      }
      }

      —————————————————————-

      【②メディアクエリでPCのみにホバーアクションを追加する】
      「フェードで切り替わるボタン」のCSSの↓は消して、「@media {}」で囲われた箇所をコピペしてください。
      .btn:hover img:nth-of-type(2) {
      opacity: 0;
      }

      @media (min-width: 1024px) {
      .btn:hover img:nth-of-type(2) {
      // PCでホバーした時のみ、ホバーアクションを指定する
      opacity: 0;
      }
      }

      —————————————————————-

      どちらでもスマホでホバーしない様できます。
      参考になれば幸いです!!
      ブログに乗っている所で、分からない部分がありましたら、またコメントくださいね!

  3. アガサ より:

    複数横に並べるときはどうやって記述しますか?

    • コメントありがとうございます!
      複数のボタンをを横並びにする時は、CSSで「.btn」に「display: inline-block;」を追加すると横並びになります。
      追記してコピペできるようしていますので、参考にしていただけると嬉しいです!

タイトルとURLをコピーしました