DEMO

基本的なHTML

基本的なHTMLは下記になります。figureでマークアップしてみました。

HTML

  1. <section class="sample1">
  2. 	<figure>
  3. 		<img src="thum01.jpg" width="400" height="266">
  4. 		<figcaption class="title">Hover Effect 01</figcaption>
  5. 	</figure>
  6. </section>

figureのCSSは「overflow: hidden」ではみ出ないようにしています。

CSS

  1. section figure {
  2.     width: 400px;
  3.     height: 266px;
  4.     margin: 0 auto;
  5.     position: relative;
  6.     overflow: hidden;
  7.     background: #000;
  8. }

1.画像を縮小しつつ下からにょきっと出るキャプション

最初はすごく簡単なやつです。
通常の状態はtranslateYで画像外に飛ばしておいて、hover時に0で表示させてアニメーションしています。
transitionの4つ目のパラメータでディレイ（時間差）を調節できます。

CSS

  1. .sample1 img {
  2.     transition: all 0.4s ease-out 0.1s;
  3. }
  4. .sample1 figure:hover img {
  5.     opacity: .6;
  6.     transform: scale(1.3);
  7. }
  8. .sample1 figcaption {
  9.     color: #fff;
  10.     background: #333;
  11.     background: rgba(0,0,0,.7);
  12.     position: absolute;
  13.     bottom: 0;
  14.     width: 100%;
  15.     height: 60px;
  16.     padding: 20px;
  17.     line-height: 1;
  18.  
  19.     /* 1行で納める */
  20.     overflow: hidden;
  21.     text-overflow: ellipsis;
  22.     white-space: nowrap;
  23.  
  24.     transition: all 0.2s ease-in 0.3s;
  25.     transform: translateY(60px);
  26. }
  27. .sample1 figure:hover figcaption {
  28.     transform: translateY(0);
  29. }

2.キャプションが横にスライドして画像が押し出される

やってることは先ほどとあまり変わりませんが画像・キャプションともtranslateXを動かして押し出されるような感じにしております。

CSS

  1. .sample2 figcaption {
  2.     position: absolute;
  3.     height: 100%;
  4.     width: 240px;
  5.     background: #366a6d;
  6.     top: 0;
  7.     display: block;
  8.     text-align: left;
  9.     padding: 20px;
  10.     color: #fff;
  11.     transform: translateX(-240px);
  12.     transition: all .5s ease-out;
  13. }
  14. .sample2 figure:hover figcaption {
  15.     transform: translateX(0);
  16. }
  17. .sample2 figure img {
  18.     left: 0;
  19.     position: absolute;
  20.     transition: all .5s ease-out;
  21. }
  22. .sample2 figure:hover img {
  23.     transform: translateX(100px);
  24. }

3.外から枠がぐいってなる

外から枠がぐいって出てきます。
枠はafterに設定してます。あとはscaleで縮小です。比率とかが結構適当です。。。

CSS

  1. .sample3 {
  2.     color: #fff;
  3. }
  4. .sample3 figure:after {
  5.     position: absolute;
  6.     border: solid 1px #fff;
  7.     content: "";
  8.     display: block;
  9.     width: 100%;
  10.     height: 100%;
  11.     left: 0;
  12.     top: 0;
  13.     opacity: 0;
  14.     transform: scale(1.0, 1.0);
  15.     transition: all .3s ease-out;
  16. }
  17. .sample3 figure:hover:after {
  18.     opacity: 1;
  19.     transform: scale(0.92, 0.88);
  20. }
  21. .sample3 figcaption {
  22.     position: absolute;
  23.     width: 100%;
  24.     top: 50%;
  25.     left: 0;
  26.     margin-top: -1em;
  27.     font-size: 20px;
  28.     letter-spacing: 5px;
  29.     opacity: 0;
  30.     transition: all .3s ease-out .2s;
  31. }
  32. .sample3 figure:hover figcaption {
  33.     letter-spacing: 1px;
  34.     opacity: 1;
  35. }
  36. .sample3 figure img {
  37.     transition: all .8s ease-out;
  38. }
  39. .sample3 figure:hover img {
  40.     opacity: .4;
  41.     transform: scale(1.3);
  42. }

4.中心線が真ん中からスーっと出る

中心線はafterに設定してます。今度はscaleで拡大です。

CSS

  1. .sample4 {
  2.     color: #fff;
  3. }
  4. .sample4 figure:after {
  5.     position: absolute;
  6.     background: #fff;
  7.     content: "";
  8.     display: block;
  9.     width: 90%;
  10.     height: 1px;
  11.     left: 5%;
  12.     top: 50%;
  13.     transform: scale(0);
  14.     transition: all .9s ease-out;
  15. }
  16. .sample4 figure:hover:after {
  17.     transform: scale(1);
  18. }
  19. .sample4 figcaption p,
  20. .sample4 figcaption h3 {
  21.     position: absolute;
  22.     text-align: center;
  23.     width: 100%;
  24.     opacity: 0;
  25.     transition: all .4s ease-out .4s;
  26. }
  27. .sample4 figcaption h3 {
  28.     bottom: 51%;
  29.     transform: translateY(-30px);
  30. }
  31. .sample4 figcaption p {
  32.     top: 52%;
  33.     transform: translateY(30px);
  34. }
  35. .sample4 figure:hover figcaption p,
  36. .sample4 figure:hover figcaption h3 {
  37.     opacity: 1;
  38.     transform: translateY(0);
  39. }
  40.  
  41. .sample4 figure img {
  42.     transition: all 1.2s ease-out;
  43. }
  44. .sample4 figure:hover img {
  45.     opacity: .4;
  46.     transform: scale(1.3);
  47. }
  48. }

5.ソーシャルボタンがぴょんぴょんぴょん

ディレイを駆使してソーシャルボタンを時間差でアニメーションさせて表示してみませましょう。
アイコンの位置とか適当です。。。

HTML

  1. <section class="sample5">
  2. 	<figure>
  3. 		<img src="thum01.jpg" width="400" height="266" class="thumb">
  4. 		<figcaption>
  5. 			<h3 class="title">Hover Effect 05</h3>
  6. 			<p>Hover Effect Description</p>
  7. 			<a href="#" class="more-btn">Read more</a>
  8.  
  9. 			<ul class="sns-btns">
  10. 				<li class="twitter"><a href="#"><img src="twitter.svg"></a></li>
  11. 				<li class="facebook"><a href="#"><img src="facebook.svg"></a></li>
  12. 				<li class="google"><a href="#"><img src="gplus.svg"></a></li>
  13. 			</ul>
  14. 		</figcaption>
  15. 	</figure>
  16. </section>

CSS

  1. .sample5 a {
  2.     color: #333;
  3. }
  4. .sample5 figcaption {
  5.     position: absolute;
  6.     height: 80px;
  7.     width: 100%;
  8.     background: #fff;
  9.     bottom: 0;
  10.     display: block;
  11.     text-align: left;
  12.     padding: 20px;
  13.     color: #333;
  14.     transition: all .3s ease-out .2s;
  15. }
  16. .sample5 figure:hover figcaption {
  17.     height: 110px;
  18.     transition-delay: 0s;
  19. }
  20. .sample5 figcaption h3 {
  21.     margin-bottom: 0;
  22.     line-height: 1.2;
  23. }
  24. .sample5 figure img.thumb {
  25.     top: 0;
  26.     left: 0;
  27.     position: absolute;
  28.     transition: all .3s ease-out .2s;
  29. }
  30. .sample5 figure:hover img.thumb {
  31.     top: -20px;
  32.     transition-delay: 0s;
  33. }
  34. .sample5 figcaption a.more-btn {
  35.     font-size: 11px;
  36.     color: #fff;
  37.     background: #1d76a6;
  38.     padding: 7px 12px;
  39.     position: absolute;
  40.     right: 0;
  41.     bottom: 0;
  42.     transform: translateX(90px);
  43.     transition: all .2s ease-out;
  44. }
  45. .sample5 figcaption a.more-btn:hover {
  46.     background: #2a9cc0;
  47. }
  48. .sample5 figure:hover figcaption a.more-btn {
  49.     transform: translateX(0);
  50.     transition-delay: .4s;
  51. }
  52. .sample5 figcaption ul.sns-btns {
  53.     list-style: none;
  54.     position: relative;
  55.     padding-top: 4px;
  56. }
  57. .sample5 figcaption ul.sns-btns li {
  58.     padding: 7px;
  59.     line-height: 1;
  60.     height: 28px;
  61.     width: 28px;
  62.     float: left;
  63.     background: #3b5998;
  64.     border-radius: 50%;
  65.     position: absolute;
  66.     transform: translateY(50px);
  67.     transition: all .15s ease-out;
  68. }
  69. .sample5 figure:hover figcaption ul.sns-btns li {
  70.     transform: translateY(0);
  71. }
  72. .sample5 figcaption ul.sns-btns li.twitter {
  73.     background: #55acee;
  74.     padding: 8px;
  75.     transition-delay: .4s;
  76. }
  77. .sample5 figcaption ul.sns-btns li.facebook {
  78.     background: #3b5998;
  79.     left: 35px;
  80.     transition-delay: .2s;
  81. }
  82. .sample5 figcaption ul.sns-btns li.google {
  83.     background: #df4a32;
  84.     left: 70px;
  85.     transition-delay: 0s;
  86. }
  87. .sample5 figure:hover figcaption ul.sns-btns li.twitter {
  88.     transition-delay: 0s;
  89. }
  90. .sample5 figure:hover figcaption ul.sns-btns li.facebook {
  91.     transition-delay: .2s;
  92. }
  93. .sample5 figure:hover figcaption ul.sns-btns li.google {
  94.     transition-delay: .4s;
  95. }
  96. .sample5 figcaption ul.sns-btns li img {
  97.     height: 100%;
  98.     vertical-align: top;
  99. }