Advertisement
Guest User

Lily CSS effect

a guest
Jan 16th, 2016
206
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.77 KB | None | 0 0
  1. .grid {
  2.     position: relative;
  3.     margin: 0 auto;
  4.     padding: 1em 0 4em;
  5.     max-width: 1000px;
  6.     list-style: none;
  7.     text-align: center;
  8. }
  9.  
  10. /* Common style */
  11. .grid figure {
  12.     position: relative;
  13.     float: left;
  14.     overflow: hidden;
  15.     margin: 10px 1%;
  16.     min-width: 320px;
  17.     max-width: 480px;
  18.     max-height: 360px;
  19.     width: 48%;
  20.     background: #3085a3;
  21.     text-align: center;
  22.     cursor: pointer;
  23. }
  24.  
  25. .grid figure img {
  26.     position: relative;
  27.     display: block;
  28.     min-height: 100%;
  29.     max-width: 100%;
  30.     opacity: 0.8;
  31. }
  32.  
  33. .grid figure figcaption {
  34.     padding: 2em;
  35.     color: #fff;
  36.     text-transform: uppercase;
  37.     font-size: 1.25em;
  38.     -webkit-backface-visibility: hidden;
  39.     backface-visibility: hidden;
  40. }
  41.  
  42. .grid figure figcaption::before,
  43. .grid figure figcaption::after {
  44.     pointer-events: none;
  45. }
  46.  
  47. .grid figure figcaption,
  48. .grid figure figcaption > a {
  49.     position: absolute;
  50.     top: 0;
  51.     left: 0;
  52.     width: 100%;
  53.     height: 100%;
  54. }
  55.  
  56. /* Anchor will cover the whole item by default */
  57. /* For some effects it will show as a button */
  58. .grid figure figcaption > a {
  59.     z-index: 1000;
  60.     text-indent: 200%;
  61.     white-space: nowrap;
  62.     font-size: 0;
  63.     opacity: 0;
  64. }
  65.  
  66. .grid figure h2 {
  67.     word-spacing: -0.15em;
  68.     font-weight: 300;
  69. }
  70.  
  71. .grid figure h2 span {
  72.     font-weight: 800;
  73. }
  74.  
  75. .grid figure h2,
  76. .grid figure p {
  77.     margin: 0;
  78. }
  79.  
  80. .grid figure p {
  81.     letter-spacing: 1px;
  82.     font-size: 68.5%;
  83. }
  84.  
  85. /* Individual effects */
  86.  
  87. /*---------------*/
  88. /***** Lily *****/
  89. /*---------------*/
  90.  
  91. figure.effect-lily img {
  92.     max-width: none;
  93.     width: -webkit-calc(100% + 50px);
  94.     width: calc(100% + 50px);
  95.     opacity: 0.7;
  96.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  97.     transition: opacity 0.35s, transform 0.35s;
  98.     -webkit-transform: translate3d(-40px,0, 0);
  99.     transform: translate3d(-40px,0,0);
  100. }
  101.  
  102. figure.effect-lily figcaption {
  103.     text-align: left;
  104. }
  105.  
  106. figure.effect-lily figcaption > div {
  107.     position: absolute;
  108.     bottom: 0;
  109.     left: 0;
  110.     padding: 2em;
  111.     width: 100%;
  112.     height: 50%;
  113. }
  114.  
  115. figure.effect-lily h2,
  116. figure.effect-lily p {
  117.     -webkit-transform: translate3d(0,40px,0);
  118.     transform: translate3d(0,40px,0);
  119. }
  120.  
  121. figure.effect-lily h2 {
  122.     -webkit-transition: -webkit-transform 0.35s;
  123.     transition: transform 0.35s;
  124. }
  125.  
  126. figure.effect-lily p {
  127.     color: rgba(255,255,255,0.8);
  128.     opacity: 0;
  129.     -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
  130.     transition: opacity 0.2s, transform 0.35s;
  131. }
  132.  
  133. figure.effect-lily:hover img,
  134. figure.effect-lily:hover p {
  135.     opacity: 1;
  136. }
  137.  
  138. figure.effect-lily:hover img,
  139. figure.effect-lily:hover h2,
  140. figure.effect-lily:hover p {
  141.     -webkit-transform: translate3d(0,0,0);
  142.     transform: translate3d(0,0,0);
  143. }
  144.  
  145. figure.effect-lily:hover p {
  146.     -webkit-transition-delay: 0.05s;
  147.     transition-delay: 0.05s;
  148.     -webkit-transition-duration: 0.35s;
  149.     transition-duration: 0.35s;
  150. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement