CSS, HTML, JavaScript, JQuery, Web開発

【Web開発サンプル】imgがhoverした時に、アニメーションで枠線をつける

使用ブラウザ:Google Chrome
使用言語:HTML, CSS, JavaScript
使用ライブラリ:JQuery


上段の画像は、カーソルを当てると枠線がアニメーションしますがそれに伴い画像も縮小します。
下段の画像は、縮小しないように枠線だけアニメーションします。

以下コード

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>上下スライド</title>

  <!-- Style -->
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!-- Script -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>

  <!-- 一応ヘッダーを書いてます。 -->
  <html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>上下スライド</title>

    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- Script -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>

    <header>
    </header>

    <div class="main-container">
      <img class="image" src="img/image1.jpg">
      <img class="image" src="img/image2.jpg">
      <img class="image" src="img/image3.jpg">
    </div>
    <div class="main-container">
      <div class="image-container"><img src="img/image1.jpg"></div>
      <div class="image-container"><img src="img/image2.jpg"></div>
      <div class="image-container"><img src="img/image3.jpg"></div>
    </div>
    <script src="js/main.js"></script>
  </body>
  </html>

  <header>
  </header>

  <div class="main-container">
    <img class="image" src="img/image1.jpg">
    <img class="image" src="img/image2.jpg">
    <img class="image" src="img/image3.jpg">
  </div>
  <div class="main-container">
    <div class="image-container"><img src="img/image1.jpg"></div>
    <div class="image-container"><img src="img/image2.jpg"></div>
    <div class="image-container"><img src="img/image3.jpg"></div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>
css
header {
  height: 60px;
  background: #000;
  margin-bottom: 20px;
}

.main-container {
  text-align: center;
}

.image {
  display: inline-block;
  width: 320px;
  height: 250px;
  border: 0px solid #F78181;
  box-sizing: border-box;
}

.image + .image {
  margin-left: 10px;
}

.image:hover {
  cursor: pointer;
}

.image-container {
  margin-top: 20px;
  display: inline-block;
  width: 320px;
  height: 250px;
  border: 0px inset #F78181;
  box-sizing: border-box;
  overflow: hidden;
}

.image-container img {
  width: 320px;
  height: 250px;
}

.image-container + .image-container {
  margin-left: 10px;
}
js
(function(){
	'use strict';

  // 上段の画像
  $('.image').hover(function() {
    $(this).stop(true).animate(
      {borderWidth: '20px'},
       200,
       '');
  }, function() {
    $(this).stop(true).animate(
      {borderWidth: '0px'},
       200,
       '');
  });

	// 下段の画像
	$('.image-container').hover(function() {
    $(this).stop(true).animate(
      {borderWidth: '20px'},
       200,
       '');
		$(this).children('img').stop(true).animate(
	     {margin: '-20px'},
       200,
			 '');
  }, function() {
    $(this).stop(true).animate(
      {borderWidth: '0px'},
       200,
       '');

	  $(this).children('img').stop(true).animate(
	 		{margin: '0px'},
	 		200,
	 		'');
  });
})();

以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です