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