Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

CSS3 Hover Animation 3
Kategorie: CSS
PHP-Fusion Version: Keine
Quelle: http://hasinhayder.github.io/ImageCaptionHoverAnimation/
Schwierigkeitsgrad:
 
Ein schöner Hoveranimationseffekt, der nur mit CSS realisiert wird und kein Javascript benötigt.

Faq

HTML-Code

GeSHi: HTML


  1. <div class="container-a3">
  2. <ul class="caption-style-3">
  3. <li>
  4. <img src="img/chaps_1x.jpg" alt="">
  5. <div class="caption">
  6. <div class="blur"></div>
  7. <div class="caption-text">
  8. <h1>Amazing Caption</h1>
  9. <p>Whatever It Is - Always Awesome</p>
  10. </div>
  11. </div>
  12. </li>
  13. <li>
  14. <img src="img/everycowboy_dribbbleready_shot.jpg" alt="">
  15. <div class="caption">
  16. <div class="blur"></div>
  17. <div class="caption-text">
  18. <h1>Amazing Caption</h1>
  19. <p>Whatever It Is - Always Awesome</p>
  20. </div>
  21. </div>
  22. </li>
  23. <li>
  24. <img src="img/ithinkican_01.jpg" alt="">
  25. <div class="caption">
  26. <div class="blur"></div>
  27. <div class="caption-text">
  28. <h1>Amazing Caption</h1>
  29. <p>Whatever It Is - Always Awesome</p>
  30. </div>
  31. </div>
  32. </li>
  33. <li>
  34. <img src="img/m.jpg" alt="">
  35. <div class="caption">
  36. <div class="blur"></div>
  37. <div class="caption-text">
  38. <h1>Amazing Caption</h1>
  39. <p>Whatever It Is - Always Awesome</p>
  40. </div>
  41. </div>
  42. </li>
  43. <li>
  44. <img src="img/raspberry.jpg" alt="">
  45. <div class="caption">
  46. <div class="blur"></div>
  47. <div class="caption-text">
  48. <h1>Amazing Caption</h1>
  49. <p>Whatever It Is - Always Awesome</p>
  50. </div>
  51. </div>
  52. </li>
  53. <li>
  54. <img src="img/sketch_1x.jpg" alt="">
  55. <div class="caption">
  56. <div class="blur"></div>
  57. <div class="caption-text">
  58. <h1>Amazing Caption</h1>
  59. <p>Whatever It Is - Always Awesome</p>
  60. </div>
  61. </div>
  62. </li>
  63. </ul>
  64. </div>
gewandelt in 0.012 Sekunden, benutzt wurde GeSHi 1.0.8.10



CSS

GeSHi: CSS


  1. h1,h2,h3,h4{
  2. padding: 0px;
  3. margin: 0px;
  4. }
  5.  
  6. .caption-style-3{
  7. list-style-type: none;
  8. margin: 0px;
  9. padding: 0px;
  10.  
  11. }
  12.  
  13. .caption-style-3 li{
  14. float: left;
  15. padding: 0px;
  16. position: relative;
  17. overflow: hidden;
  18. }
  19.  
  20. .caption-style-3 li:hover .caption{
  21. opacity: 1;
  22. transform: translateY(-100px);
  23. -webkit-transform:translateY(-100px);
  24. -moz-transform:translateY(-100px);
  25. -ms-transform:translateY(-100px);
  26. -o-transform:translateY(-100px);
  27. }
  28.  
  29. .caption-style-3 li:hover img{
  30. opacity: 1;
  31. transform: translateY(-40px);
  32. -webkit-transform:translateY(-40px);
  33. -moz-transform:translateY(-40px);
  34. -ms-transform:translateY(-40px);
  35. -o-transform:translateY(-40px);
  36.  
  37. }
  38.  
  39.  
  40. .caption-style-3 img{
  41. margin: 0px;
  42. padding: 0px;
  43. float: left;
  44. z-index: 4;
  45. }
  46.  
  47.  
  48. .caption-style-3 .caption{
  49. cursor: pointer;
  50. position: absolute;
  51. opacity: 0;
  52. top:300px;
  53. -webkit-transition:all 0.15s ease-in-out;
  54. -moz-transition:all 0.15s ease-in-out;
  55. -o-transition:all 0.15s ease-in-out;
  56. -ms-transition:all 0.15s ease-in-out;
  57. transition:all 0.15s ease-in-out;
  58.  
  59. }
  60.  
  61. .caption-style-3 img{
  62. -webkit-transition:all 0.15s ease-in-out;
  63. -moz-transition:all 0.15s ease-in-out;
  64. -o-transition:all 0.15s ease-in-out;
  65. -ms-transition:all 0.15s ease-in-out;
  66. transition:all 0.15s ease-in-out;
  67.  
  68. }
  69. .caption-style-3 .blur{
  70. background-color: rgba(142, 68, 173,0.95);
  71. height: 300px;
  72. width: 400px;
  73. z-index: 5;
  74. position: absolute;
  75. }
  76.  
  77. .caption-style-3 .caption-text h1{
  78. text-transform: uppercase;
  79. font-size: 18px;
  80. }
  81. .caption-style-3 .caption-text{
  82. z-index: 10;
  83. color: #fff;
  84. position: absolute;
  85. width: 400px;
  86. height: 300px;
  87. text-align: center;
  88. top:20px;
  89. }
  90.  
  91.  
  92. /** Nav Menu */
  93. ul.nav-menu{
  94. padding: 0px;
  95. margin: 0px;
  96. list-style-type: none;
  97. width: 490px;
  98. margin: 60px auto;
  99. }
  100.  
  101. ul.nav-menu li{
  102. display: inline;
  103. margin-right: 10px;
  104. padding:10px;
  105. border: 1px solid #ddd;
  106. }
  107.  
  108. ul.nav-menu li a{
  109. color: #eee;
  110. text-decoration: none;
  111. text-transform: uppercase;
  112. }
  113.  
  114. ul.nav-menu li a:hover, ul.nav-menu li a.active{
  115. color: #2c3e50;
  116. }
  117. /** content **/
  118. .content{
  119. margin-top: 100px;
  120. margin-left: 100px;
  121. width: 700px;
  122. }
  123. .content h1, .content h2{
  124. font-family: "Source Sans Pro",sans-serif;
  125. color: #ecf0f1;
  126. padding: 0px;
  127. margin: 0px;
  128. font-weight: normal;
  129. }
  130.  
  131. .content h1{
  132. font-weight: 900;
  133. font-size: 64px;
  134. }
  135.  
  136. .content h2{
  137. font-size:26px;
  138. }
  139.  
  140. .content p{
  141. color: #ecf0f1;
  142. font-family: "Lato";
  143. line-height: 28px;
  144. font-size: 15px;
  145. padding-top: 50px;
  146. }
  147.  
  148. p.credit{
  149. padding-top: 20px;
  150. font-size: 12px;
  151. }
  152.  
  153. p a{
  154. color: #ecf0f1;
  155. }
gewandelt in 0.007 Sekunden, benutzt wurde GeSHi 1.0.8.10




Quelle: http://hasinhayde...Animation/
Download auf https://github.co...rAnimation

Illustration Credit: Illustrations used in this example are coming from Mike | Creative Mints & Colin Hesterly

Demo ansehen

Tutorial Verlinken

URL: 
BBCode: 
HTML-Code: 
Kommentare
Es wurden noch keine Kommentare verfasst.
Kommentar schreiben
Bitte logge dich ein, um einen Kommentar zu verfassen.
Anzeige


© 2016 Real Space. All rights reserved | Design by W3layouts
Powered by PHP-Fusion copyright © 2002 - 2017 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.