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

2020年06月13日
この記事は約17分で読めます。
広告

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

基本のHTML

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

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

DEMO

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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

ボタン画像１
ボタン画像２

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だけで出来る様々な画像切り替え方法｜その２」をまとめましたのでよかったら見てください！

ボタンを横並びにする

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

DEMO

ボタン画像１
ボタン画像２
ボタン画像１
ボタン画像２
ボタン画像１
ボタン画像２

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. 上田　ヒロユキ より:
    2023年3月5日 02:38

    こんにちは。
    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がうまく動作しません。
    どこが間違っているか教えていただけませんか

    返信
    • エンデ・バタロー より:
      2023年3月5日 11:32

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

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

      返信
    • 上田　ヒロユキ より:
      2023年3月5日 17:13

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

      返信
  2. は より:
    2021年7月12日 10:06

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

    返信
    • エンデ・バタロー より:
      2021年7月13日 17:44

      コメントしていただきありがとうございます！
      スマホでホバーを避ける場合、メディアクエリで「: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. アガサ より:
    2021年3月19日 12:26

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

    返信
    • エンデ・バタロー より:
      2021年3月28日 13:57

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

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