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

CSS
この記事は約16分で読めます。
スポンサーリンク

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;
}
SNSフォローボタン
エンデ・バタローをフォローする
CSS HTML サイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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

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

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