WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

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

この方法は非常にシンプルな方法で、画像をホバーした際に画像のサイズをひと回り大きくする、という手法です。
ポイントは「li」に複数のクラス名を付けて、それぞれにスタイルシートを記述しなければいけないので、考え方はシンプルですが記述方法は少し煩雑になってしまいます。
最新バージョンの主要ブラウザーであればベンダープレフィックスは不要ですが、その都度確認し、必要であれば付け加えましょう。

<!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 Pゴシック", "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;
}
.zoom-2x2 img {
  width: 357px;
  height: 357px;
  transition: all 0.5s ease;
}
.zoom-2x2 img:hover {
  width: 400px;
  height: 400px;
}
.size-2x1 {
  width:357px;
  height:170px;
  overflow: hidden;
}
.zoom-2x1 img {
  width: 357px;
  height: 170px;
  transition: all 0.5s ease;
}
.zoom-2x1 img:hover {
  width: 400px;
  height: 190px;
}
.size-1x1 {
  width:170px;
  height:170px;
  overflow: hidden;
}
.zoom-1x1 img {
  width: 170px;
  height: 170px;
  transition: all 0.3s ease;
}
.zoom-1x1 img:hover {
  width: 190px;
  height: 190px;
}
</style>
</head>
<body>
<div id="container">
  <div class="inner">
    <ul class="contents-list">
      <li class="size-2x2 zoom-2x2"><a href="#"><img src="img/01-l.png" alt="#"></a></li>
      <li class="size-2x1 zoom-2x1"><a href="#"><img src="img/02-m.png" alt="#"></a></li>
      <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/03-s.png" alt="#"></a></li>
      <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/04-s.png" alt="#"></a></li>
      <li class="size-2x1 zoom-2x1"><a href="#"><img src="img/05-m.png" alt="#"></a></li>
      <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/06-s.png" alt="#"></a></li>
      <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/07-s.png" alt="#"></a></li>
      <li class="size-2x1 zoom-2x1"><a href="#"><img src="img/08-m.png" alt="#"></a></li>
      <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/09-s.png" alt="#"></a></li>
    </ul>
  </div>
</div>  <!--/container-->

</body>
</html>