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