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 2
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-a2">
  2. <ul class="caption-style-2">
  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-2{
  7. list-style-type: none;
  8. margin: 0px;
  9. padding: 0px;
  10.  
  11. }
  12.  
  13. .caption-style-2 li{
  14. float: left;
  15. padding: 0px;
  16. position: relative;
  17. overflow: hidden;
  18. }
  19.  
  20. .caption-style-2 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.  
  30.  
  31. .caption-style-2 img{
  32. margin: 0px;
  33. padding: 0px;
  34. float: left;
  35. z-index: 4;
  36. }
  37.  
  38.  
  39. .caption-style-2 .caption{
  40. cursor: pointer;
  41. position: absolute;
  42. opacity: 0;
  43. top:300px;
  44. -webkit-transition:all 0.15s ease-in-out;
  45. -moz-transition:all 0.15s ease-in-out;
  46. -o-transition:all 0.15s ease-in-out;
  47. -ms-transition:all 0.15s ease-in-out;
  48. transition:all 0.15s ease-in-out;
  49.  
  50. }
  51. .caption-style-2 .blur{
  52. background-color: rgba(0,0,0,0.7);
  53. height: 300px;
  54. width: 400px;
  55. z-index: 5;
  56. position: absolute;
  57. }
  58.  
  59. .caption-style-2 .caption-text h1{
  60. text-transform: uppercase;
  61. font-size: 18px;
  62. }
  63. .caption-style-2 .caption-text{
  64. z-index: 10;
  65. color: #fff;
  66. position: absolute;
  67. width: 400px;
  68. height: 300px;
  69. text-align: center;
  70. top:20px;
  71. }
  72.  
  73.  
  74. /** Nav Menu */
  75. ul.nav-menu{
  76. padding: 0px;
  77. margin: 0px;
  78. list-style-type: none;
  79. width: 490px;
  80. margin: 60px auto;
  81. }
  82.  
  83. ul.nav-menu li{
  84. display: inline;
  85. margin-right: 10px;
  86. padding:10px;
  87. border: 1px solid #ddd;
  88. }
  89.  
  90. ul.nav-menu li a{
  91. color: #eee;
  92. text-decoration: none;
  93. text-transform: uppercase;
  94. }
  95.  
  96. ul.nav-menu li a:hover, ul.nav-menu li a.active{
  97. color: #2c3e50;
  98. }
  99. /** content **/
  100. .content{
  101. margin-top: 100px;
  102. margin-left: 100px;
  103. width: 700px;
  104. }
  105. .content h1, .content h2{
  106. font-family: "Source Sans Pro",sans-serif;
  107. color: #ecf0f1;
  108. padding: 0px;
  109. margin: 0px;
  110. font-weight: normal;
  111. }
  112.  
  113. .content h1{
  114. font-weight: 900;
  115. font-size: 64px;
  116. }
  117.  
  118. .content h2{
  119. font-size:26px;
  120. }
  121.  
  122. .content p{
  123. color: #ecf0f1;
  124. font-family: "Lato";
  125. line-height: 28px;
  126. font-size: 15px;
  127. padding-top: 50px;
  128. }
  129.  
  130. p.credit{
  131. padding-top: 20px;
  132. font-size: 12px;
  133. }
  134.  
  135. p a{
  136. color: #ecf0f1;
  137. }
gewandelt in 0.006 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 - 2018 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.