hoverで画像がスライド!margin-leftとscaleでCSSアニメーション3選

今回は画像にmargin-leftやtransform: scaleなどを使って画像を滑らかにスライドさせるかっこいいアニメーションを実装してみました。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

 

1. 画像が滑らかに横スライドするhoverアニメーション

動きは下の画像のような感じになります

実際の動きはこちらです
コードを見る
<div>
  <div class="container">
    <div class="bg-img">
      <div class="image">
        <figure>
          <img src="https://www.twinzlabo.com/wp-content/uploads/2020/06/slide-shoes.jpg" />
          <p class="fonts">Hover</p>
        </figure>
      </div>
    </div>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  width  : 100%;
  margin-top: 30px;
}
.bg-img {
  display: block;
	margin: 15px 15px 0;
	padding: 0;
  cursor : pointer;
  /* cursor: pointerを設定することでカーソルが画像の上にある時カーソルがpointerに変化 */
}
.bg-img .image {
	position: relative;
	width: 300px;
	height: 200px;
	margin: 0 0 0 25px;
	padding: 0;
}
.bg-img figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
  /* 画像のはみ出した箇所を隠す */
  border: 1px solid lightgray;
}
.bg-img .image p {
	position: absolute;
  /* .bg-img .image(hover後に現れる文字と背景)の位置を指定 */
	bottom: 85px;
	left: 0;
	z-index: 100;
  /* ボックスの重なる順序を指定(レイヤー順序を指定できるイメージ) */
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 25px;
	text-decoration: none;
	text-align: center;
	transition: 1.3s ease-in-out;
  /* 文字と背景が現れる時間を指定(ease-in-outで開始時と終了時が緩やかになる) */
	opacity: 1;
  margin-left: 0.5em;
  font-weight: bold;
  letter-spacing:0.8em;
}
.bg-img figure img {
  display: block;
	margin-left: 325px;
	transform: scale(1.1);
  /* 背景が画像を覆う範囲の指定 */
	transition: .9s ease-in-out;
  /* 文字と背景が現れる時間を指定 */
  width: inherit;
  height: inherit;
  /* inheritは親要素で指定した値がそのまま受け継がれる */
}
.bg-img figure:hover img {
	margin-left: 0px;
}
.bg-img figure:hover p {
	opacity:0;
  transition: .8s ease-in-out;
  /* 文字と背景が現れる時間を指定 */
}
ここがポイント!
  1. flexboxを使って画像をcontainerの真ん中に設置
  2. hoverを使うことでカーソルがボタンの上にある時の挙動を指定
  3. position: absolute;を使うことで親要素(今回はimageクラス)からの絶対的な位置を指定
  4. transitionプロパティをhoverの前後で別々の時間で指定して滑らかなアニメーションを実現

 

2. スライドして横の画像が現れるhoverアニメーション 

動きは下の画像のような感じになります

実際の動きはこちらです
コードを見る
<div>
  <div class="container">
    <div class="bg-img">
      <div class="image">
        <figure>
          <img src="https://www.twinzlabo.com/wp-content/uploads/2020/06/2-shoes.png" />
          <p class="fonts">Hover</p>
        </figure>
      </div>
    </div>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  width  : 100%;
  margin-top: 30px;
}
.bg-img {
  display: block;
	margin: 15px 15px 0;
	padding: 0;
  cursor : pointer;
  /* cursor: pointerを設定することでカーソルが画像の上にある時カーソルがpointerに変化 */
}
.bg-img .image {
	position: relative;
	width: 300px;
	height: 200px;
	margin: 0 0 0 25px;
	padding: 0;
}
.bg-img figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
  /* 画像のはみ出した箇所を隠す */
  border: 1px solid lightgray;
}
.bg-img .image p {
	position: absolute;
  /* .bg-img .image(hover後に現れる文字と背景)の位置を指定 */
	bottom: 85px;
	left: 0;
	z-index: 100;
  /* ボックスの重なる順序を指定(レイヤー順序を指定できるイメージ) */
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 25px;
	text-decoration: none;
	text-align: center;
	transition: 1.3s ease-in-out;
  /* 文字と背景が現れる時間を指定(ease-in-outで開始時と終了時が緩やかになる) */
	opacity: 1;
  font-weight: 900;
  background: rgba(0,0,0,0.7);
  /* rgbaでカラーと透明度を指定 */
  letter-spacing:0.8em;
}
.bg-img figure img {
  display: block;
  margin-left: 20px;
	transform: scale(1.1);
  /* 背景が画像を覆う範囲の指定 */
	transition: .9s ease-in-out;
  /* 文字と背景が現れる時間を指定 */
  height: inherit;
  /* inheritは親要素で指定した値がそのまま受け継がれる */
}
.bg-img figure:hover img {
	margin-left: -100%;
}
.bg-img figure:hover p {
	opacity:0;
  transition: .8s ease-in-out;
  /* 文字と背景が現れる時間を指定 */
}
ここがポイント!
  1. flexboxを使って画像をcontainerの真ん中に設置
  2. hoverを使うことでカーソルがボタンの上にある時の挙動を指定
  3. position: absolute;を使うことで親要素(今回はimageクラス)からの絶対的な位置を指定
  4. transitionプロパティをhoverの前後で別々の時間で指定して滑らかなアニメーションを実現
  5. imgタグをhover後にmargin-left: -100%;が読まれて右方向に大きくスライド

 

3. 横の画像にズームインしながらスライドするhoverアニメーション

動きは下の画像のような感じになります

実際の動きはこちらです
コードを見る
<div>
  <div class="container">
    <div class="bg-img">
      <div class="image">
        <figure>
          <img src="https://www.twinzlabo.com/wp-content/uploads/2020/06/2-shoes.png" />
          <p class="fonts">Hover</p>
        </figure>
      </div>
    </div>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  width  : 100%;
  margin-top: 30px;
}
.bg-img {
  display: block;
	margin: 15px 15px 0;
	padding: 0;
  cursor : pointer;
  /* cursor: pointerを設定することでカーソルが画像の上にある時カーソルがpointerに変化 */
}
.bg-img .image {
	position: relative;
	width: 300px;
	height: 200px;
	margin: 0 0 0 25px;
	padding: 0;
}
.bg-img figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
  /* 画像のはみ出した箇所を隠す */
  border: 1px solid lightgray;
}
.bg-img .image p {
	position: absolute;
  /* .bg-img .image(hover後に現れる文字と背景)の位置を指定 */
	bottom: 85px;
	left: 0;
	z-index: 100;
  /* ボックスの重なる順序を指定(レイヤー順序を指定できるイメージ) */
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 25px;
	text-decoration: none;
	text-align: center;
	transition: 1.3s ease-in-out;
  /* 文字と背景が現れる時間を指定(ease-in-outで開始時と終了時が緩やかになる) */
	opacity: 1;
  font-weight: 900;
  background: rgba(0,0,0,0.7);
  /* rgbaでカラーと透明度を指定 */
  letter-spacing:0.8em;
}
.bg-img figure img {
  display: block;
  margin-left: 20px;
	transform: scale(1.1);
  /* 背景が画像を覆う範囲の指定 */
	transition: .9s ease-in-out;
  /* 文字と背景が現れる時間を指定 */
  height: inherit;
  /* inheritは親要素で指定した値がそのまま受け継がれる */
}
.bg-img figure:hover img {
	margin-left: -100%;
  transform: scale(2.1);
  /* 背景が画像を覆う範囲の指定 */
}
.bg-img figure:hover p {
	opacity:0;
  transition: 1s ease-in-out;
  /* 文字と背景が現れる時間を指定 */
}
ここがポイント!
  1. flexboxを使って画像をcontainerの真ん中に設置
  2. hoverを使うことでカーソルがボタンの上にある時の挙動を指定
  3. position: absolute;を使うことで親要素(今回はimageクラス)からの絶対的な位置を指定
  4. transitionプロパティをhoverの前後で別々の時間で指定して滑らかなアニメーションを実現
  5. transform: scaleを使うことでhover後にズームインされた画像を表示

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる