WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

画像をホバーした時のアニメーションその２

HTML5+CSS3

今回のパターンは

 transform: scale(1.2);

を使います。
CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することが出来ます。
「scale()」は下記のようにX方向とY方向で指定することもできます。

transform: scale(1.2,1.2);

また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。
この方法を使う場合、クラス名を２つ付ける必要も無くなり、スタイルシートの記述もスッキリ出来ます。

デモ

http://yachin29.com/zoom/index4.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブ対応サイト制作</title>
<style>
@charset "utf-8";
/* CSS Document */

body,p,h1,h2,h3,h4,h5,ul,li,a,em,dl,img,em{
  padding:0;
  margin:0;
  text-decoration:none;
}

body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background: #000;
}
ul {
  list-style-type:none;
}
img {
	vertical-align:bottom
}

.inner {
  width:950px;
  margin:20px auto 0;
  overflow: hidden;
  padding-left: 10px;
  background: #FFF;
}
ul.contents-list li{
  float:left;
  margin:9px;
}

.size-2x2 {
  width:357px;
  height:357px;
  overflow: hidden;
}
.size-2x2 img {
  transition: transform 0.5s linear;
}
.size-2x2 img:hover {
  transform: scale(1.2);
}

.size-2x1 {
  width:357px;
  height:170px;
  overflow: hidden;
}
.size-2x1 img {
  transition: transform 0.5s linear;
}
.size-2x1 img:hover {
  transform: scale(1.2);
}

.size-1x1 {
  width:170px;
  height:170px;
  overflow: hidden;
}
.size-1x1 img {
  transition: transform 0.5s linear;
}
.size-1x1 img:hover {
  transform: scale(1.2);
}
</style>
</head>
<body>
<div id="container">
  <div class="inner">
    <ul class="contents-list">
      <li class="size-2x2"><a href="#"><img src="img/01-l.png" alt="#"></a></li>
      <li class="size-2x1"><a href="#"><img src="img/02-m.png" alt="#"></a></li>
      <li class="size-1x1"><a href="#"><img src="img/03-s.png" alt="#"></a></li>
      <li class="size-1x1"><a href="#"><img src="img/04-s.png" alt="#"></a></li>
      <li class="size-2x1"><a href="#"><img src="img/05-m.png" alt="#"></a></li>
      <li class="size-1x1"><a href="#"><img src="img/06-s.png" alt="#"></a></li>
      <li class="size-1x1"><a href="#"><img src="img/07-s.png" alt="#"></a></li>
      <li class="size-2x1"><a href="#"><img src="img/08-m.png" alt="#"></a></li>
      <li class="size-1x1"><a href="#"><img src="img/09-s.png" alt="#"></a></li>
    </ul>
  </div>
</div>  <!--/container-->

</body>
</html>