API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 26th, 2015
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 27.24 KB | None | 0 0
raw download clone embed print report
  1. .grid {
  2.     position: relative;
  3.     clear: both;
  4.     margin: 0 auto;
  5.     padding: 1em 0 4em;
  6.     max-width: 1000px;
  7.     list-style: none;
  8.     text-align: center;
  9. }
  10.  
  11. /* Common style */
  12. .grid figure {
  13.     position: relative;
  14.     float: left;
  15.     overflow: hidden;
  16.     margin: 10px 1%;
  17.     min-width: 320px;
  18.     max-width: 480px;
  19.     max-height: 360px;
  20.     width: 48%;
  21.     height: auto;
  22.     background: #3085a3;
  23.     text-align: center;
  24.     cursor: pointer;
  25. }
  26.  
  27. .grid figure img {
  28.     position: relative;
  29.     display: block;
  30.     min-height: 100%;
  31.     max-width: 100%;
  32.     opacity: 0.8;
  33. }
  34.  
  35. .grid figure figcaption {
  36.     padding: 2em;
  37.     color: #fff;
  38.     text-transform: uppercase;
  39.     font-size: 1.25em;
  40.     -webkit-backface-visibility: hidden;
  41.     backface-visibility: hidden;
  42. }
  43.  
  44. .grid figure figcaption::before,
  45. .grid figure figcaption::after {
  46.     pointer-events: none;
  47. }
  48.  
  49. .grid figure figcaption,
  50. .grid figure figcaption > a {
  51.     position: absolute;
  52.     top: 0;
  53.     left: 0;
  54.     width: 100%;
  55.     height: 100%;
  56. }
  57.  
  58. /* Anchor will cover the whole item by default */
  59. /* For some effects it will show as a button */
  60. .grid figure figcaption > a {
  61.     z-index: 1000;
  62.     text-indent: 200%;
  63.     white-space: nowrap;
  64.     font-size: 0;
  65.     opacity: 0;
  66. }
  67.  
  68. .grid figure h2 {
  69.     word-spacing: -0.15em;
  70.     font-weight: 300;
  71. }
  72.  
  73. .grid figure h2 span {
  74.     font-weight: 800;
  75. }
  76.  
  77. .grid figure h2,
  78. .grid figure p {
  79.     margin: 0;
  80. }
  81.  
  82. .grid figure p {
  83.     letter-spacing: 1px;
  84.     font-size: 68.5%;
  85. }
  86.  
  87. /* Individual effects */
  88.  
  89. /*---------------*/
  90. /***** Julia *****/
  91. /*---------------*/
  92.  
  93. figure.effect-julia {
  94.     background: #2f3238;
  95. }
  96.  
  97. figure.effect-julia img {
  98.     max-width: none;
  99.     height: 400px;
  100.     -webkit-transition: opacity 1s, -webkit-transform 1s;
  101.     transition: opacity 1s, transform 1s;
  102.     -webkit-backface-visibility: hidden;
  103.     backface-visibility: hidden;
  104. }
  105.  
  106. figure.effect-julia figcaption {
  107.     text-align: left;
  108. }
  109.  
  110. figure.effect-julia h2 {
  111.     position: relative;
  112.     padding: 0.5em 0;
  113. }
  114.  
  115. figure.effect-julia p {
  116.     display: inline-block;
  117.     margin: 0 0 0.25em;
  118.     padding: 0.4em 1em;
  119.     background: rgba(255,255,255,0.9);
  120.     color: #2f3238;
  121.     text-transform: none;
  122.     font-weight: 500;
  123.     font-size: 75%;
  124.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  125.     transition: opacity 0.35s, transform 0.35s;
  126.     -webkit-transform: translate3d(-360px,0,0);
  127.     transform: translate3d(-360px,0,0);
  128. }
  129.  
  130. figure.effect-julia p:first-child {
  131.     -webkit-transition-delay: 0.15s;
  132.     transition-delay: 0.15s;
  133. }
  134.  
  135. figure.effect-julia p:nth-of-type(2) {
  136.     -webkit-transition-delay: 0.1s;
  137.     transition-delay: 0.1s;
  138. }
  139.  
  140. figure.effect-julia p:nth-of-type(3) {
  141.     -webkit-transition-delay: 0.05s;
  142.     transition-delay: 0.05s;
  143. }
  144.  
  145. figure.effect-julia:hover p:first-child {
  146.     -webkit-transition-delay: 0s;
  147.     transition-delay: 0s;
  148. }
  149.  
  150. figure.effect-julia:hover p:nth-of-type(2) {
  151.     -webkit-transition-delay: 0.05s;
  152.     transition-delay: 0.05s;
  153. }
  154.  
  155. figure.effect-julia:hover p:nth-of-type(3) {
  156.     -webkit-transition-delay: 0.1s;
  157.     transition-delay: 0.1s;
  158. }
  159.  
  160. figure.effect-julia:hover img {
  161.     opacity: 0.4;
  162.     -webkit-transform: scale3d(1.1,1.1,1);
  163.     transform: scale3d(1.1,1.1,1);
  164. }
  165.  
  166. figure.effect-julia:hover p {
  167.     opacity: 1;
  168.     -webkit-transform: translate3d(0,0,0);
  169.     transform: translate3d(0,0,0);
  170. }
  171.  
  172. /*-----------------*/
  173. /***** Goliath *****/
  174. /*-----------------*/
  175.  
  176. figure.effect-goliath {
  177.     background: #df4e4e;
  178. }
  179.  
  180. figure.effect-goliath img,
  181. figure.effect-goliath h2 {
  182.     -webkit-transition: -webkit-transform 0.35s;
  183.     transition: transform 0.35s;
  184. }
  185.  
  186. figure.effect-goliath img {
  187.     -webkit-backface-visibility: hidden;
  188.     backface-visibility: hidden;
  189. }
  190.  
  191. figure.effect-goliath h2,
  192. figure.effect-goliath p {
  193.     position: absolute;
  194.     bottom: 0;
  195.     left: 0;
  196.     padding: 30px;
  197. }
  198.  
  199. figure.effect-goliath p {
  200.     text-transform: none;
  201.     font-size: 90%;
  202.     opacity: 0;
  203.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  204.     transition: opacity 0.35s, transform 0.35s;
  205.     -webkit-transform: translate3d(0,50px,0);
  206.     transform: translate3d(0,50px,0);
  207. }
  208.  
  209. figure.effect-goliath:hover img {
  210.     -webkit-transform: translate3d(0,-80px,0);
  211.     transform: translate3d(0,-80px,0);
  212. }
  213.  
  214. figure.effect-goliath:hover h2 {
  215.     -webkit-transform: translate3d(0,-100px,0);
  216.     transform: translate3d(0,-100px,0);
  217. }
  218.  
  219. figure.effect-goliath:hover p {
  220.     opacity: 1;
  221.     -webkit-transform: translate3d(0,0,0);
  222.     transform: translate3d(0,0,0);
  223. }
  224.  
  225. /*-----------------*/
  226. /***** Hera *****/
  227. /*-----------------*/
  228.  
  229. figure.effect-hera {
  230.     background: #303fa9;
  231. }
  232.  
  233. figure.effect-hera h2 {
  234.     font-size: 158.75%;
  235. }
  236.  
  237. figure.effect-hera h2,
  238. figure.effect-hera p {
  239.     position: absolute;
  240.     top: 50%;
  241.     left: 50%;
  242.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  243.     transition: opacity 0.35s, transform 0.35s;
  244.     -webkit-transform: translate3d(-50%,-50%,0);
  245.     transform: translate3d(-50%,-50%,0);
  246.     -webkit-transform-origin: 50%;
  247.     transform-origin: 50%;
  248. }
  249.  
  250. figure.effect-hera figcaption::before {
  251.     position: absolute;
  252.     top: 50%;
  253.     left: 50%;
  254.     width: 200px;
  255.     height: 200px;
  256.     border: 2px solid #fff;
  257.     content: '';
  258.     opacity: 0;
  259.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  260.     transition: opacity 0.35s, transform 0.35s;
  261.     -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
  262.     transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
  263.     -webkit-transform-origin: 50%;
  264.     transform-origin: 50%;
  265. }
  266.  
  267. figure.effect-hera p {
  268.     width: 100px;
  269.     text-transform: none;
  270.     font-size: 121%;
  271.     line-height: 2;
  272. }
  273.  
  274. figure.effect-hera p a {
  275.     color: #fff;
  276. }
  277.  
  278. figure.effect-hera p a:hover,
  279. figure.effect-hera p a:focus {
  280.     opacity: 0.6;
  281. }
  282.  
  283. figure.effect-hera p a i {
  284.     opacity: 0;
  285.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  286.     transition: opacity 0.35s, transform 0.35s;
  287. }
  288.  
  289. figure.effect-hera p a:first-child i {
  290.     -webkit-transform: translate3d(-60px,-60px,0);
  291.     transform: translate3d(-60px,-60px,0);
  292. }
  293.  
  294. figure.effect-hera p a:nth-child(2) i {
  295.     -webkit-transform: translate3d(60px,-60px,0);
  296.     transform: translate3d(60px,-60px,0);
  297. }
  298.  
  299. figure.effect-hera p a:nth-child(3) i {
  300.     -webkit-transform: translate3d(-60px,60px,0);
  301.     transform: translate3d(-60px,60px,0);
  302. }
  303.  
  304. figure.effect-hera p a:nth-child(4) i {
  305.     -webkit-transform: translate3d(60px,60px,0);
  306.     transform: translate3d(60px,60px,0);
  307. }
  308.  
  309. figure.effect-hera:hover figcaption::before {
  310.     opacity: 1;
  311.     -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
  312.     transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
  313. }
  314.  
  315. figure.effect-hera:hover h2 {
  316.     opacity: 0;
  317.     -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
  318.     transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
  319. }
  320.  
  321. figure.effect-hera:hover p i:empty {
  322.     -webkit-transform: translate3d(0,0,0);
  323.     transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
  324.     opacity: 1;
  325. }
  326.  
  327. /*-----------------*/
  328. /***** Winston *****/
  329. /*-----------------*/
  330.  
  331. figure.effect-winston {
  332.     background: #162633;
  333.     text-align: left;
  334. }
  335.  
  336. figure.effect-winston img {
  337.     -webkit-transition: opacity 0.45s;
  338.     transition: opacity 0.45s;
  339.     -webkit-backface-visibility: hidden;
  340.     backface-visibility: hidden;
  341. }
  342.  
  343. figure.effect-winston figcaption::before {
  344.     position: absolute;
  345.     top: 0;
  346.     left: 0;
  347.     width: 100%;
  348.     height: 100%;
  349.     background: url(../img/triangle.svg) no-repeat center center;
  350.     background-size: 100% 100%;
  351.     content: '';
  352.     -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
  353.     transition: opacity 0.45s, transform 0.45s;
  354.     -webkit-transform: rotate3d(0,0,1,45deg);
  355.     transform: rotate3d(0,0,1,45deg);
  356.     -webkit-transform-origin: 0 100%;
  357.     transform-origin: 0 100%;
  358. }
  359.  
  360. figure.effect-winston h2 {
  361.     -webkit-transition: -webkit-transform 0.35s;
  362.     transition: transform 0.35s;
  363.     -webkit-transform: translate3d(0,20px,0);
  364.     transform: translate3d(0,20px,0);
  365. }
  366.  
  367. figure.effect-winston p {
  368.     position: absolute;
  369.     right: 0;
  370.     bottom: 0;
  371.     padding: 0 1.5em 7% 0;
  372. }
  373.  
  374. figure.effect-winston a {
  375.     margin: 0 10px;
  376.     color: #5d504f;
  377.     font-size: 170%;
  378. }
  379.  
  380. figure.effect-winston a:hover,
  381. figure.effect-winston a:focus {
  382.     color: #cc6055;
  383. }
  384.  
  385. figure.effect-winston p a i {
  386.     opacity: 0;
  387.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  388.     transition: opacity 0.35s, transform 0.35s;
  389.     -webkit-transform: translate3d(0,50px,0);
  390.     transform: translate3d(0,50px,0);
  391. }
  392.  
  393. figure.effect-winston:hover img {
  394.     opacity: 0.6;
  395. }
  396.  
  397. figure.effect-winston:hover h2 {
  398.     -webkit-transform: translate3d(0,0,0);
  399.     transform: translate3d(0,0,0);
  400. }
  401.  
  402. figure.effect-winston:hover figcaption::before {
  403.     opacity: 0.7;
  404.     -webkit-transform: rotate3d(0,0,1,20deg);
  405.     transform: rotate3d(0,0,1,20deg);
  406. }
  407.  
  408. figure.effect-winston:hover p i {
  409.     opacity: 1;
  410.     -webkit-transform: translate3d(0,0,0);
  411.     transform: translate3d(0,0,0);
  412. }
  413.  
  414. figure.effect-winston:hover p a:nth-child(3) i {
  415.     -webkit-transition-delay: 0.05s;
  416.     transition-delay: 0.05s;
  417. }
  418.  
  419. figure.effect-winston:hover p a:nth-child(2) i {
  420.     -webkit-transition-delay: 0.1s;
  421.     transition-delay: 0.1s;
  422. }
  423.  
  424. figure.effect-winston:hover p a:first-child i {
  425.     -webkit-transition-delay: 0.15s;
  426.     transition-delay: 0.15s;
  427. }
  428.  
  429. /*-----------------*/
  430. /***** Selena *****/
  431. /*-----------------*/
  432.  
  433. figure.effect-selena {
  434.     background: #fff;
  435. }
  436.  
  437. figure.effect-selena img {
  438.     opacity: 0.95;
  439.     -webkit-transition: -webkit-transform 0.35s;
  440.     transition: transform 0.35s;
  441.     -webkit-transform-origin: 50% 50%;
  442.     transform-origin: 50% 50%;
  443. }
  444.  
  445. figure.effect-selena:hover img {
  446.     -webkit-transform: scale3d(0.95,0.95,1);
  447.     transform: scale3d(0.95,0.95,1);
  448. }
  449.  
  450. figure.effect-selena h2 {
  451.     -webkit-transition: -webkit-transform 0.35s;
  452.     transition: transform 0.35s;
  453.     -webkit-transform: translate3d(0,20px,0);
  454.     transform: translate3d(0,20px,0);
  455. }
  456.  
  457. figure.effect-selena p {
  458.     opacity: 0;
  459.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  460.     transition: opacity 0.35s, transform 0.35s;
  461.     -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
  462.     transform: perspective(1000px) rotate3d(1,0,0,90deg);
  463.     -webkit-transform-origin: 50% 0%;
  464.     transform-origin: 50% 0%;
  465. }
  466.  
  467. figure.effect-selena:hover h2 {
  468.     -webkit-transform: translate3d(0,0,0);
  469.     transform: translate3d(0,0,0);
  470. }
  471.  
  472. figure.effect-selena:hover p {
  473.     opacity: 1;
  474.     -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
  475.     transform: perspective(1000px) rotate3d(1,0,0,0);
  476. }
  477.  
  478. /*-----------------*/
  479. /***** Terry *****/
  480. /*-----------------*/
  481.  
  482. figure.effect-terry {
  483.     background: #34495e;
  484. }
  485.  
  486. figure.effect-terry figcaption {
  487.     padding: 1em;
  488. }
  489.  
  490. figure.effect-terry figcaption::before,
  491. figure.effect-terry figcaption::after {
  492.     position: absolute;
  493.     width: 200%;
  494.     height: 200%;
  495.     border-style: solid;
  496.     border-color: #101010;
  497.     content: '';
  498.     -webkit-transition: -webkit-transform 0.35s;
  499.     transition: transform 0.35s;
  500. }
  501.  
  502. figure.effect-terry figcaption::before {
  503.     right: 0;
  504.     bottom: 0;
  505.     border-width: 0 70px 60px 0;
  506.     -webkit-transform: translate3d(70px,60px,0);
  507.     transform: translate3d(70px,60px,0);
  508. }
  509.  
  510. figure.effect-terry figcaption::after {
  511.     top: 0;
  512.     left: 0;
  513.     border-width: 15px 0 0 15px;
  514.     -webkit-transform: translate3d(-15px,-15px,0);
  515.     transform: translate3d(-15px,-15px,0);
  516. }
  517.  
  518. figure.effect-terry img,
  519. figure.effect-terry p a {
  520.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  521.     transition: opacity 0.35s, transform 0.35s;
  522. }
  523.  
  524. figure.effect-terry img {
  525.     opacity: 0.85;
  526. }
  527.  
  528. figure.effect-terry h2 {
  529.     position: absolute;
  530.     bottom: 0;
  531.     left: 0;
  532.     padding: 0.4em 10px;
  533.     width: 50%;
  534.     -webkit-transition: -webkit-transform 0.35s;
  535.     transition: transform 0.35s;
  536.     -webkit-transform: translate3d(100%,0,0);
  537.     transform: translate3d(100%,0,0);
  538. }
  539.  
  540. @media screen and (max-width: 920px) {
  541.     figure.effect-terry h2 {
  542.         padding: 0.75em 10px;
  543.         font-size: 120%;
  544.     }
  545. }
  546.  
  547. figure.effect-terry p {
  548.     float: right;
  549.     clear: both;
  550.     text-align: left;
  551.     text-transform: none;
  552.     font-size: 111%;
  553. }
  554.  
  555. figure.effect-terry p a {
  556.     display: block;
  557.     margin-bottom: 1em;
  558.     color: #fff;
  559.     opacity: 0;
  560.     -webkit-transform: translate3d(90px,0,0);
  561.     transform: translate3d(90px,0,0);
  562. }
  563.  
  564. figure.effect-terry p a:hover,
  565. figure.effect-terry p a:focus {
  566.     color: #f3cf3f;
  567. }
  568.  
  569. figure.effect-terry:hover figcaption::before,
  570. figure.effect-terry:hover figcaption::after {
  571.     -webkit-transform: translate3d(0,0,0);
  572.     transform: translate3d(0,0,0);
  573. }
  574.  
  575. figure.effect-terry:hover img {
  576.     opacity: 0.6;
  577.  
  578. }
  579.  
  580. figure.effect-terry:hover h2,
  581. figure.effect-terry:hover p a {
  582.     -webkit-transform: translate3d(0,0,0);
  583.     transform: translate3d(0,0,0);
  584. }
  585.  
  586. figure.effect-terry:hover p a {
  587.     opacity: 1;
  588. }
  589.  
  590. figure.effect-terry:hover p a:first-child {
  591.     -webkit-transition-delay: 0.025s;
  592.     transition-delay: 0.025s;
  593. }
  594.  
  595. figure.effect-terry:hover p a:nth-child(2) {
  596.     -webkit-transition-delay: 0.05s;
  597.     transition-delay: 0.05s;
  598. }
  599.  
  600. figure.effect-terry:hover p a:nth-child(3) {
  601.     -webkit-transition-delay: 0.075s;
  602.     transition-delay: 0.075s;
  603. }
  604.  
  605. figure.effect-terry:hover p a:nth-child(4) {
  606.     -webkit-transition-delay: 0.1s;
  607.     transition-delay: 0.1s;
  608. }
  609.  
  610. /*-----------------*/
  611. /***** Phoebe *****/
  612. /*-----------------*/
  613.  
  614. figure.effect-phoebe {
  615.     background: #675983;
  616. }
  617.  
  618. figure.effect-phoebe img {
  619.     opacity: 0.85;
  620.     -webkit-transition: opacity 0.35s;
  621.     transition: opacity 0.35s;
  622. }
  623.  
  624. figure.effect-phoebe:hover img {
  625.     opacity: 0.6;
  626. }
  627.  
  628. figure.effect-phoebe figcaption::before {
  629.     position: absolute;
  630.     top: 0;
  631.     left: 0;
  632.     width: 100%;
  633.     height: 100%;
  634.     background: url(../img/triangle2.svg) no-repeat center center;
  635.     background-size: 100% 100%;
  636.     content: '';
  637.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  638.     transition: opacity 0.35s, transform 0.35s;
  639.     -webkit-transform: scale3d(5,2.5,1);
  640.     transform: scale3d(5,2.5,1);
  641.     -webkit-transform-origin: 50% 50%;
  642.     transform-origin: 50% 50%;
  643. }
  644.  
  645. figure.effect-phoebe:hover figcaption::before {
  646.     opacity: 0.6;
  647.     -webkit-transform: scale3d(1,1,1);
  648.     transform: scale3d(1,1,1);
  649. }
  650.  
  651. figure.effect-phoebe h2 {
  652.     margin-top: 1em;
  653.     -webkit-transition: transform 0.35s;
  654.     transition: transform 0.35s;
  655.     -webkit-transform: translate3d(0,40px,0);
  656.     transform: translate3d(0,40px,0);
  657. }
  658.  
  659. figure.effect-phoebe:hover h2 {
  660.     -webkit-transform: translate3d(0,0,0);
  661.     transform: translate3d(0,0,0);
  662. }
  663.  
  664. figure.effect-phoebe p a {
  665.     color: #fff;
  666.     font-size: 140%;
  667.     opacity: 0;
  668.     position: relative;
  669.     display: inline-block;
  670.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  671.     transition: opacity 0.35s, transform 0.35s;
  672. }
  673.  
  674. figure.effect-phoebe p a:first-child {
  675.     -webkit-transform: translate3d(-60px,-60px,0);
  676.     transform: translate3d(-60px,-60px,0);
  677. }
  678.  
  679. figure.effect-phoebe p a:nth-child(2) {
  680.     -webkit-transform: translate3d(0,60px,0);
  681.     transform: translate3d(0,60px,0);
  682. }
  683.  
  684. figure.effect-phoebe p a:nth-child(3) {
  685.     -webkit-transform: translate3d(60px,-60px,0);
  686.     transform: translate3d(60px,-60px,0);
  687. }
  688.  
  689. figure.effect-phoebe:hover p a {
  690.     opacity: 1;
  691.     -webkit-transform: translate3d(0,0,0);
  692.     transform: translate3d(0,0,0);
  693. }
  694.  
  695. /*-----------------*/
  696. /***** Apollo *****/
  697. /*-----------------*/
  698.  
  699. figure.effect-apollo {
  700.     background: #3498db;
  701. }
  702.  
  703. figure.effect-apollo img {
  704.     opacity: 0.95;
  705.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  706.     transition: opacity 0.35s, transform 0.35s;
  707.     -webkit-transform: scale3d(1.05,1.05,1);
  708.     transform: scale3d(1.05,1.05,1);
  709. }
  710.  
  711. figure.effect-apollo figcaption::before {
  712.     position: absolute;
  713.     top: 0;
  714.     left: 0;
  715.     width: 100%;
  716.     height: 100%;
  717.     background: rgba(255,255,255,0.5);
  718.     content: '';
  719.     -webkit-transition: -webkit-transform 0.6s;
  720.     transition: transform 0.6s;
  721.     -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
  722.     transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
  723. }
  724.  
  725. figure.effect-apollo p {
  726.     position: absolute;
  727.     right: 0;
  728.     bottom: 0;
  729.     margin: 3em;
  730.     padding: 0 1em;
  731.     max-width: 150px;
  732.     border-right: 4px solid #fff;
  733.     text-align: right;
  734.     opacity: 0;
  735.     -webkit-transition: opacity 0.35s;
  736.     transition: opacity 0.35s;
  737. }
  738.  
  739. figure.effect-apollo h2 {
  740.     text-align: left;
  741. }
  742.  
  743. figure.effect-apollo:hover img {
  744.     opacity: 0.6;
  745.     -webkit-transform: scale3d(1,1,1);
  746.     transform: scale3d(1,1,1);
  747. }
  748.  
  749. figure.effect-apollo:hover figcaption::before {
  750.     -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
  751.     transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
  752. }
  753.  
  754. figure.effect-apollo:hover p {
  755.     opacity: 1;
  756.     -webkit-transition-delay: 0.1s;
  757.     transition-delay: 0.1s;
  758. }
  759.  
  760. /*-----------------*/
  761. /***** Kira *****/
  762. /*-----------------*/
  763.  
  764. figure.effect-kira {
  765.     background: #fff;
  766.     text-align: left;
  767. }
  768.  
  769. figure.effect-kira img {
  770.     -webkit-transition: opacity 0.35s;
  771.     transition: opacity 0.35s;
  772. }
  773.  
  774. figure.effect-kira figcaption {
  775.     z-index: 1;
  776. }
  777.  
  778. figure.effect-kira p {
  779.     padding: 2.25em 0.5em;
  780.     font-weight: 600;  
  781.     font-size: 100%;
  782.     line-height: 1.5;
  783.     opacity: 0;
  784.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  785.     transition: opacity 0.35s, transform 0.35s;
  786.     -webkit-transform: translate3d(0,-10px,0);
  787.     transform: translate3d(0,-10px,0);
  788. }
  789.  
  790. figure.effect-kira p a {
  791.     margin: 0 0.5em;
  792.     color: #101010;
  793. }
  794.  
  795. figure.effect-kira p a:hover,
  796. figure.effect-kira p a:focus {
  797.     opacity: 0.6;
  798. }
  799.  
  800. figure.effect-kira figcaption::before {
  801.     position: absolute;
  802.     top: 0;
  803.     right: 2em;
  804.     left: 2em;
  805.     z-index: -1;
  806.     height: 3.5em;
  807.     background: #fff;
  808.     content: '';
  809.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  810.     transition: opacity 0.35s, transform 0.35s;
  811.     -webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
  812.     transform: translate3d(0,4em,0) scale3d(1,0.023,1);
  813.     -webkit-transform-origin: 50% 0;
  814.     transform-origin: 50% 0;
  815. }
  816.  
  817. figure.effect-kira:hover img {
  818.     opacity: 0.5;
  819. }
  820.  
  821. figure.effect-kira:hover p {
  822.     opacity: 1;
  823.     -webkit-transform: translate3d(0,0,0);
  824.     transform: translate3d(0,0,0);
  825. }
  826.  
  827. figure.effect-kira:hover figcaption::before {
  828.     opacity: 0.7;
  829.     -webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
  830.     transform: translate3d(0,5em,0) scale3d(1,1,1);
  831. }
  832.  
  833. /*-----------------*/
  834. /***** Steve *****/
  835. /*-----------------*/
  836.  
  837. figure.effect-steve {
  838.     z-index: auto;
  839.     overflow: visible;
  840.     background: #000;
  841. }
  842.  
  843. figure.effect-steve:before,
  844. figure.effect-steve h2:before {
  845.     position: absolute;
  846.     top: 0;
  847.     left: 0;
  848.     z-index: -1;
  849.     width: 100%;
  850.     height: 100%;
  851.     background: #000;
  852.     content: '';
  853.     -webkit-transition: opacity 0.35s;
  854.     transition: opacity 0.35s;
  855. }
  856.  
  857. figure.effect-steve:before {
  858.     box-shadow: 0 3px 30px rgba(0,0,0,0.8);
  859.     opacity: 0;
  860. }
  861.  
  862. figure.effect-steve figcaption {
  863.     z-index: 1;
  864. }
  865.  
  866. figure.effect-steve img {
  867.     opacity: 1;
  868.     -webkit-transition: -webkit-transform 0.35s;
  869.     transition: transform 0.35s;
  870.     -webkit-transform: perspective(1000px) translate3d(0,0,0);
  871.     transform: perspective(1000px) translate3d(0,0,0);
  872. }
  873.  
  874. figure.effect-steve h2,
  875. figure.effect-steve p {
  876.     background: #fff;
  877.     color: #2d434e;
  878. }
  879.  
  880. figure.effect-steve h2 {
  881.     position: relative;
  882.     margin-top: 2em;
  883.     padding: 0.25em;
  884. }
  885.  
  886. figure.effect-steve h2:before {
  887.     box-shadow: 0 1px 10px rgba(0,0,0,0.5);
  888. }
  889.  
  890. figure.effect-steve p {
  891.     margin-top: 1em;
  892.     padding: 0.5em;
  893.     font-weight: 800;
  894.     opacity: 0;
  895.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  896.     transition: opacity 0.35s, transform 0.35s;
  897.     -webkit-transform: scale3d(0.9,0.9,1);
  898.     transform: scale3d(0.9,0.9,1);
  899. }
  900.  
  901. figure.effect-steve:hover:before {
  902.     opacity: 1;
  903. }
  904.  
  905. figure.effect-steve:hover img {
  906.     -webkit-transform: perspective(1000px) translate3d(0,0,21px);
  907.     transform: perspective(1000px) translate3d(0,0,21px);
  908. }
  909.  
  910. figure.effect-steve:hover h2:before {
  911.     opacity: 0;
  912. }
  913.  
  914. figure.effect-steve:hover p {
  915.     opacity: 1;
  916.     -webkit-transform: scale3d(1,1,1);
  917.     transform: scale3d(1,1,1);
  918. }
  919.  
  920. /*-----------------*/
  921. /***** Moses *****/
  922. /*-----------------*/
  923.  
  924. figure.effect-moses {
  925.     background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
  926.     background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
  927. }
  928.  
  929. figure.effect-moses img {
  930.     opacity: 0.85;
  931.     -webkit-transition: opacity 0.35s;
  932.     transition: opacity 0.35s;
  933. }
  934.  
  935. figure.effect-moses h2,
  936. figure.effect-moses p {
  937.     padding: 20px;
  938.     width: 50%;
  939.     height: 50%;
  940.     border: 2px solid #fff;
  941. }
  942.  
  943. figure.effect-moses h2 {
  944.     padding: 20px;
  945.     width: 50%;
  946.     height: 50%;
  947.     text-align: left;
  948.     -webkit-transition: -webkit-transform 0.35s;
  949.     transition: transform 0.35s;
  950.     -webkit-transform: translate3d(10px,10px,0);
  951.     transform: translate3d(10px,10px,0);
  952. }
  953.  
  954. figure.effect-moses p {
  955.     float: right;
  956.     padding: 20px;
  957.     text-align: right;
  958.     opacity: 0;
  959.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  960.     transition: opacity 0.35s, transform 0.35s;
  961.     -webkit-transform: translate3d(-50%,-50%,0);
  962.     transform: translate3d(-50%,-50%,0);
  963. }
  964.  
  965. figure.effect-moses:hover h2 {
  966.     -webkit-transform: translate3d(0,0,0);
  967.     transform: translate3d(0,0,0);
  968. }
  969.  
  970. figure.effect-moses:hover p {
  971.     opacity: 1;
  972.     -webkit-transform: translate3d(0,0,0);
  973.     transform: translate3d(0,0,0);
  974. }
  975.  
  976. figure.effect-moses:hover img {
  977.     opacity: 0.6;
  978. }
  979.  
  980. /*---------------*/
  981. /***** Jazz *****/
  982. /*---------------*/
  983.  
  984. figure.effect-jazz {
  985.     background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
  986.     background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
  987. }
  988.  
  989. figure.effect-jazz img {
  990.     opacity: 0.9;
  991. }
  992.  
  993. figure.effect-jazz figcaption::after,
  994. figure.effect-jazz img,
  995. figure.effect-jazz p {
  996.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  997.     transition: opacity 0.35s, transform 0.35s;
  998. }
  999.  
  1000. figure.effect-jazz figcaption::after {
  1001.     position: absolute;
  1002.     top: 0;
  1003.     left: 0;
  1004.     width: 100%;
  1005.     height: 100%;
  1006.     border-top: 1px solid #fff;
  1007.     border-bottom: 1px solid #fff;
  1008.     content: '';
  1009.     opacity: 0;
  1010.     -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
  1011.     transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
  1012.     -webkit-transform-origin: 50% 50%;
  1013.     transform-origin: 50% 50%;
  1014. }
  1015.  
  1016. figure.effect-jazz h2,
  1017. figure.effect-jazz p {
  1018.     opacity: 1;
  1019.     -webkit-transform: scale3d(0.8,0.8,1);
  1020.     transform: scale3d(0.8,0.8,1);
  1021. }
  1022.  
  1023. figure.effect-jazz h2 {
  1024.     padding-top: 26%;
  1025.     -webkit-transition: -webkit-transform 0.35s;
  1026.     transition: transform 0.35s;
  1027. }
  1028.  
  1029. figure.effect-jazz p {
  1030.     padding: 0.5em 2em;
  1031.     text-transform: none;
  1032.     font-size: 0.85em;
  1033.     opacity: 0;
  1034. }
  1035.  
  1036. figure.effect-jazz:hover img {
  1037.     opacity: 0.7;
  1038.     -webkit-transform: scale3d(1.05,1.05,1);
  1039.     transform: scale3d(1.05,1.05,1);
  1040. }
  1041.  
  1042. figure.effect-jazz:hover figcaption::after {
  1043.     opacity: 1;
  1044.     -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
  1045.     transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
  1046. }
  1047.  
  1048. figure.effect-jazz:hover h2,
  1049. figure.effect-jazz:hover p {
  1050.     opacity: 1;
  1051.     -webkit-transform: scale3d(1,1,1);
  1052.     transform: scale3d(1,1,1);
  1053. }
  1054.  
  1055. /*---------------*/
  1056. /***** Ming *****/
  1057. /*---------------*/
  1058.  
  1059. figure.effect-ming {
  1060.     background: #030c17;
  1061. }
  1062.  
  1063. figure.effect-ming img {
  1064.     opacity: 0.9;
  1065.     -webkit-transition: opacity 0.35s;
  1066.     transition: opacity 0.35s;
  1067. }
  1068.  
  1069. figure.effect-ming figcaption::before {
  1070.     position: absolute;
  1071.     top: 30px;
  1072.     right: 30px;
  1073.     bottom: 30px;
  1074.     left: 30px;
  1075.     border: 2px solid #fff;
  1076.     box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
  1077.     content: '';
  1078.     opacity: 0;
  1079.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1080.     transition: opacity 0.35s, transform 0.35s;
  1081.     -webkit-transform: scale3d(1.4,1.4,1);
  1082.     transform: scale3d(1.4,1.4,1);
  1083. }
  1084.  
  1085. figure.effect-ming h2 {
  1086.     margin: 20% 0 10px 0;
  1087.     -webkit-transition: -webkit-transform 0.35s;
  1088.     transition: transform 0.35s;
  1089. }
  1090.  
  1091. figure.effect-ming p {
  1092.     padding: 1em;
  1093.     opacity: 0;
  1094.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1095.     transition: opacity 0.35s, transform 0.35s;
  1096.     -webkit-transform: scale(1.5);
  1097.     transform: scale(1.5);
  1098. }
  1099.  
  1100. figure.effect-ming:hover h2 {
  1101.     -webkit-transform: scale(0.9);
  1102.     transform: scale(0.9);
  1103. }
  1104.  
  1105. figure.effect-ming:hover figcaption::before,
  1106. figure.effect-ming:hover p {
  1107.     opacity: 1;
  1108.     -webkit-transform: scale3d(1,1,1);
  1109.     transform: scale3d(1,1,1);
  1110. }
  1111.  
  1112. figure.effect-ming:hover figcaption {
  1113.     background-color: rgba(58,52,42,0);
  1114. }
  1115.  
  1116. figure.effect-ming:hover img {
  1117.     opacity: 0.4;
  1118. }
  1119.  
  1120. /*---------------*/
  1121. /***** Lexi *****/
  1122. /*---------------*/
  1123.  
  1124. figure.effect-lexi {
  1125.     background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
  1126.     background: linear-gradient(-45deg, #000 0%,#fff 100%);
  1127. }
  1128.  
  1129. figure.effect-lexi img {
  1130.     margin: -10px 0 0 -10px;
  1131.     max-width: none;
  1132.     width: -webkit-calc(100% + 10px);
  1133.     width: calc(100% + 10px);
  1134.     opacity: 0.9;
  1135.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1136.     transition: opacity 0.35s, transform 0.35s;
  1137.     -webkit-transform: translate3d(10px,10px,0);
  1138.     transform: translate3d(10px,10px,0);
  1139.     -webkit-backface-visibility: hidden;
  1140.     backface-visibility: hidden;
  1141. }
  1142.  
  1143. figure.effect-lexi figcaption::before,
  1144. figure.effect-lexi p {
  1145.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1146.     transition: opacity 0.35s, transform 0.35s;
  1147. }
  1148.  
  1149. figure.effect-lexi figcaption::before {
  1150.     position: absolute;
  1151.     right: -100px;
  1152.     bottom: -100px;
  1153.     width: 300px;
  1154.     height: 300px;
  1155.     border: 2px solid #fff;
  1156.     border-radius: 50%;
  1157.     box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
  1158.     content: '';
  1159.     opacity: 0;
  1160.     -webkit-transform: scale3d(0.5,0.5,1);
  1161.     transform: scale3d(0.5,0.5,1);
  1162.     -webkit-transform-origin: 50% 50%;
  1163.     transform-origin: 50% 50%;
  1164. }
  1165.  
  1166. figure.effect-lexi:hover img {
  1167.     opacity: 0.6;
  1168.     -webkit-transform: translate3d(0,0,0);
  1169.     transform: translate3d(0,0,0);
  1170. }
  1171.  
  1172. figure.effect-lexi h2 {
  1173.     text-align: left;
  1174.     -webkit-transition: -webkit-transform 0.35s;
  1175.     transition: transform 0.35s;
  1176.     -webkit-transform: translate3d(5px,5px,0);
  1177.     transform: translate3d(5px,5px,0);
  1178. }
  1179.  
  1180. figure.effect-lexi p {
  1181.     position: absolute;
  1182.     right: 0;
  1183.     bottom: 0;
  1184.     padding: 0 1.5em 1.5em 0;
  1185.     width: 140px;
  1186.     text-align: right;
  1187.     opacity: 0;
  1188.     -webkit-transform: translate3d(20px,20px,0);
  1189.     transform: translate3d(20px,20px,0);
  1190. }
  1191.  
  1192. figure.effect-lexi:hover figcaption::before {
  1193.     opacity: 1;
  1194.     -webkit-transform: scale3d(1,1,1);
  1195.     transform: scale3d(1,1,1);
  1196. }
  1197.  
  1198. figure.effect-lexi:hover h2,
  1199. figure.effect-lexi:hover p {
  1200.     opacity: 1;
  1201.     -webkit-transform: translate3d(0,0,0);
  1202.     transform: translate3d(0,0,0);
  1203. }
  1204.  
  1205. /*---------------*/
  1206. /***** Duke *****/
  1207. /*---------------*/
  1208.  
  1209. figure.effect-duke {
  1210.     background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
  1211.     background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
  1212. }
  1213.  
  1214. figure.effect-duke img,
  1215. figure.effect-duke p {
  1216.     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  1217.     transition: opacity 0.35s, transform 0.35s;
  1218. }
  1219.  
  1220. figure.effect-duke:hover img {
  1221.     opacity: 0.1;
  1222.     -webkit-transform: scale3d(2,2,1);
  1223.     transform: scale3d(2,2,1);
  1224. }
  1225.  
  1226. figure.effect-duke h2 {
  1227.     -webkit-transition: -webkit-transform 0.35s;
  1228.     transition: transform 0.35s;
  1229.     -webkit-transform: scale3d(0.8,0.8,1);
  1230.     transform: scale3d(0.8,0.8,1);
  1231.     -webkit-transform-origin: 50% 100%;
  1232.     transform-origin: 50% 100%;
  1233. }
  1234.  
  1235. figure.effect-duke p {
  1236.     position: absolute;
  1237.     bottom: 0;
  1238.     left: 0;
  1239.     margin: 20px;
  1240.     padding: 30px;
  1241.     border: 2px solid #fff;
  1242.     text-transform: none;
  1243.     font-size: 90%;
  1244.     opacity: 0;
  1245.     -webkit-transform: scale3d(0.8,0.8,1);
  1246.     transform: scale3d(0.8,0.8,1);
  1247.     -webkit-transform-origin: 50% -100%;
  1248.     transform-origin: 50% -100%;
  1249. }
  1250.  
  1251. figure.effect-duke:hover h2,
  1252. figure.effect-duke:hover p {
  1253.     opacity: 1;
  1254.     -webkit-transform: scale3d(1,1,1);
  1255.     transform: scale3d(1,1,1);
  1256. }
  1257.  
  1258. /* Media queries */
  1259. @media screen and (max-width: 50em) {
  1260.     .content {
  1261.         padding: 0 10px;
  1262.         text-align: center;
  1263.     }
  1264.     .grid figure {
  1265.         display: inline-block;
  1266.         float: none;
  1267.         margin: 10px auto;
  1268.         width: 100%;
  1269.     }
  1270. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!