API tools faq
paste
trenzalours

fancy hover effects 01

trenzalours
Jan 20th, 2015
101
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <title>{Title}</title>
  4. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type="text/css">
  5. <style type="text/css">
  6.  
  7. @font-face {
  8. font-family: "avantgarde";
  9. src: url('../content/fonts/ITCAvantGardeStd-DemiCn.eot');
  10. src: local('☺'), url('../content/fonts/ITCAvantGardeStd-DemiCn.woff') format('woff'), url('../content/fonts/ITCAvantGardeStd-DemiCn.ttf') format('truetype'), url('../content/fonts/ITCAvantGardeStd-DemiCn.svg') format('svg');
  11. font-weight: normal;
  12. font-style: normal;
  13. }
  14.  
  15. .grid {
  16. position: relative;
  17. margin: 0 auto;
  18. padding: 1em 0 4em;
  19. max-width: 960px;
  20. height:auto;
  21. list-style: none;
  22. text-align: center;
  23. font-family:consolas;
  24. font-size:9px;
  25. }
  26.  
  27. #title{
  28. font-family:'avantgarde';
  29. }
  30.  
  31. /* Common style */
  32. .grid figure {
  33. position: relative;
  34. float: left;
  35. overflow: hidden;
  36. margin: 10px 1%;
  37. width: 300px;
  38. height: 200px;
  39. background: #3085a3;
  40. text-align: center;
  41. cursor: pointer;
  42. }
  43.  
  44. .grid figure img {
  45. position: relative;
  46. display: block;
  47. height: 100%;
  48. overflow:hidden;
  49. width: 300px;
  50. opacity: 0.8;
  51. }
  52.  
  53. .grid figure figcaption {
  54. padding: 2em;
  55. color: #fff;
  56. text-transform: uppercase;
  57. font-size: 15px;
  58. -webkit-backface-visibility: hidden;
  59. backface-visibility: hidden;
  60. }
  61.  
  62. .grid figure figcaption::before,
  63. .grid figure figcaption::after {
  64. pointer-events: none;
  65. }
  66.  
  67. .grid figure figcaption,
  68. .grid figure figcaption > a {
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. width: 300px;
  73. height: 200px;
  74. }
  75.  
  76. /* Anchor will cover the whole item by default */
  77. /* For some effects it will show as a button */
  78. .grid figure figcaption > a {
  79. z-index: 1000;
  80. text-indent: 200%;
  81. white-space: nowrap;
  82. font-size: 0;
  83. opacity: 0;
  84. }
  85.  
  86. .grid figure h2 {
  87. word-spacing: -0.15em;
  88. font-weight: 300;
  89. }
  90.  
  91. .grid figure h2 span {
  92. font-weight: 800;
  93. }
  94.  
  95. .grid figure h2,
  96. .grid figure p {
  97. margin: 0;
  98. }
  99.  
  100. .grid figure p {
  101. letter-spacing: 1px;
  102. font-size: 68.5%;
  103. }
  104.  
  105. figure.effect-milo {
  106. background: #000;
  107. }
  108.  
  109. figure.effect-milo img {
  110. max-width: none;
  111. width: -webkit-calc(100% + 60px);
  112. width: calc(100% + 60px);
  113. opacity: 1;
  114. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  115. transition: opacity 0.35s, transform 0.35s;
  116. -webkit-transform: translate3d(-30px,0,0) scale(1.12);
  117. transform: translate3d(-30px,0,0) scale(1.12);
  118. -webkit-backface-visibility: hidden;
  119. backface-visibility: hidden;
  120. }
  121.  
  122. figure.effect-milo:hover img {
  123. opacity: 0.5;
  124. -webkit-transform: translate3d(0,0,0) scale(1);
  125. transform: translate3d(0,0,0) scale(1);
  126. }
  127.  
  128. figure.effect-milo h2 {
  129. position: absolute;
  130. right: 50px;
  131. bottom: 50px;
  132. padding: 1em 1.2em;
  133. }
  134.  
  135. figure.effect-milo p {
  136. padding: 0 10px 0 0;
  137. width: 50%;
  138. border-right: 1px solid #fff;
  139. text-align: right;
  140. opacity: 0;
  141. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  142. transition: opacity 0.35s, transform 0.35s;
  143. -webkit-transform: translate3d(-40px,0,0);
  144. transform: translate3d(-40px,0,0);
  145. }
  146.  
  147. figure.effect-milo:hover p {
  148. opacity: 1;
  149. -webkit-transform: translate3d(0,0,0);
  150. transform: translate3d(0,0,0);
  151. }
  152.  
  153. figure.effect-apollo {
  154. background: #3498db;
  155. }
  156.  
  157. figure.effect-apollo img {
  158. opacity: 0.95;
  159. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  160. transition: opacity 0.35s, transform 0.35s;
  161. -webkit-transform: scale3d(1.05,1.05,1);
  162. transform: scale3d(1.05,1.05,1);
  163. }
  164.  
  165. figure.effect-apollo figcaption::before {
  166. position: absolute;
  167. top: 0;
  168. left: 0;
  169. width: 100%;
  170. height: 100%;
  171. background: rgba(255,255,255,0.5);
  172. content: '';
  173. -webkit-transition: -webkit-transform 0.6s;
  174. transition: transform 0.6s;
  175. -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
  176. transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
  177. }
  178.  
  179. figure.effect-apollo p {
  180. position: absolute;
  181. right: 50px;
  182. bottom: 50px;
  183. margin: 3em;
  184. padding: 0 1em;
  185. max-width: 150px;
  186. border-right: 4px solid #fff;
  187. text-align: right;
  188. opacity: 0;
  189. color:#fff;
  190. -webkit-transition: opacity 0.35s;
  191. transition: opacity 0.35s;
  192. }
  193.  
  194. figure.effect-apollo h2 {
  195. text-align: left;
  196. }
  197.  
  198. figure.effect-apollo:hover img {
  199. opacity: 0.6;
  200. -webkit-transform: scale3d(1,1,1);
  201. transform: scale3d(1,1,1);
  202. }
  203.  
  204. figure.effect-apollo:hover figcaption::before {
  205. -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
  206. transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
  207. }
  208.  
  209. figure.effect-apollo:hover p {
  210. opacity: 1;
  211. -webkit-transition-delay: 0.1s;
  212. transition-delay: 0.1s;
  213. }
  214.  
  215. figure.effect-dexter {
  216. background: -webkit-linear-gradient(left top, rgba(124, 0, 226,1), rgba(106, 145, 252, 1), white);
  217. background: -o-linear-gradient(bottom right, rgba(124, 0, 226,1), rgba(106, 145, 252, 1), white);
  218. background: -moz-linear-gradient(bottom right, rgba(124, 0, 226, 1), rgba(106, 145, 252, 1), white);
  219. background: linear-gradient(to bottom right, rgba(124, 0, 226, 1), rgba(106, 145, 252, 1), white);
  220. }
  221.  
  222. figure.effect-dexter img {
  223. opacity:0.8;
  224. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  225. transition: opacity 0.35s, transform 0.35s;
  226. -webkit-transform: scale3d(1.05,1.05,1);
  227. transform: scale3d(1.05,1.05,1);
  228. }
  229.  
  230. figure.effect-dexter:hover img {
  231. opacity: 0.55;
  232.  
  233. }
  234.  
  235. figure.effect-dexter figcaption::after {
  236. position: absolute;
  237. right: 30px;
  238. bottom: 80px;
  239. left: 28px;
  240. height:70px;
  241. border: 4px solid #fff;
  242. width:238px;
  243. content: '';
  244. -webkit-transition: -webkit-transform 0.35s;
  245. transition: transform 0.35s;
  246. -webkit-transform: translate3d(0,-100%,0);
  247. transform: translate3d(0,-100%,0);
  248. }
  249.  
  250. figure.effect-dexter:hover figcaption::after {
  251. -webkit-transform: translate3d(0,0,0);
  252. transform: translate3d(0,0,0);
  253. }
  254.  
  255. figure.effect-dexter figcaption {
  256. padding: 1.8em 3em;
  257. text-align: left;
  258. }
  259.  
  260. figure.effect-dexter p {
  261. position: absolute;
  262. right: 80px;
  263. width:225px;
  264. bottom: 90px;
  265. left: 80px;
  266. opacity: 0;
  267. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  268. transition: opacity 0.35s, transform 0.35s;
  269. -webkit-transform: translate3d(0,-100px,0);
  270. transform: translate3d(0,-100px,0);
  271. }
  272.  
  273. figure.effect-dexter:hover p {
  274. opacity: 1;
  275. -webkit-transform: translate3d(0,0,0);
  276. transform: translate3d(0,0,0);
  277. }
  278.  
  279. figure.effect-sarah {
  280. background: ;
  281. background: -webkit-linear-gradient(top, rgba(137, 113, 242,1) 0%, rgba(252, 169, 233,1) 100%);
  282. background: linear-gradient(to bottom, rgba(137, 113, 242,1) 0%,rgba(252, 169, 233,1) 100%);
  283. }
  284.  
  285. figure.effect-sarah img {
  286. max-width: none;
  287. width: -webkit-calc(100% + 20px);
  288. width: calc(100% + 20px);
  289. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  290. transition: opacity 0.35s, transform 0.35s;
  291. -webkit-transform: translate3d(-10px,0,0);
  292. transform: translate3d(-10px,0,0);
  293. -webkit-backface-visibility: hidden;
  294. backface-visibility: hidden;
  295. }
  296.  
  297. figure.effect-sarah:hover img {
  298. opacity: 0.4;
  299. -webkit-transform: translate3d(0,0,0);
  300. transform: translate3d(0,0,0);
  301. }
  302.  
  303. figure.effect-sarah figcaption {
  304. text-align: left;
  305. }
  306.  
  307. figure.effect-sarah h2 {
  308. position: relative;
  309. overflow: hidden;
  310. padding: 0.5em 0;
  311. }
  312.  
  313. figure.effect-sarah h2::after {
  314. position: absolute;
  315. bottom: 0;
  316. left: 0;
  317. width: 240px;
  318. height: 3px;
  319. background: #fff;
  320. content: '';
  321. -webkit-transition: -webkit-transform 0.35s;
  322. transition: transform 0.35s;
  323. -webkit-transform: translate3d(-100%,0,0);
  324. transform: translate3d(-100%,0,0);
  325. }
  326.  
  327. figure.effect-sarah:hover h2::after {
  328. -webkit-transform: translate3d(0,0,0);
  329. transform: translate3d(0,0,0);
  330. }
  331.  
  332. figure.effect-sarah p {
  333. padding: 1em 0;
  334. opacity: 0;
  335. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  336. transition: opacity 0.35s, transform 0.35s;
  337. -webkit-transform: translate3d(100%,0,0);
  338. transform: translate3d(100%,0,0);
  339. }
  340.  
  341. figure.effect-sarah:hover p {
  342. opacity: 1;
  343. -webkit-transform: translate3d(0,0,0);
  344. transform: translate3d(0,0,0);
  345. }
  346.  
  347. figure.effect-ruby {
  348. background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255, 25, 105,1) 100%);
  349. background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255, 25, 105,1) 100%);
  350. }
  351.  
  352. figure.effect-ruby img {
  353. opacity: 0.8;
  354. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  355. transition: opacity 0.35s, transform 0.35s;
  356. -webkit-transform: scale3d(1.05,1.05,1);
  357. transform: scale3d(1.05,1.05,1);
  358. }
  359.  
  360. figure.effect-ruby:hover img {
  361. opacity: 0.6;
  362. -webkit-transform: scale3d(1,1,1);
  363. transform: scale3d(1,1,1);
  364. }
  365.  
  366. figure.effect-ruby h2 {
  367. margin-top: 20px;
  368. width:230px;
  369. text-align:center;
  370. -webkit-transition: -webkit-transform 0.35s;
  371. transition: transform 0.35s;
  372. -webkit-transform: translate3d(0,20px,0);
  373. transform: translate3d(0,20px,0);
  374. }
  375.  
  376. figure.effect-ruby p {
  377. margin: 1em 0 0;
  378. padding: 3em 1em;
  379. border: 1px solid #fff;
  380. width:221px;
  381. opacity: 0;
  382. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  383. transition: opacity 0.35s, transform 0.35s;
  384. -webkit-transform: translate3d(0,20px,0) scale(1.1);
  385. transform: translate3d(0,20px,0) scale(1.1);
  386. }
  387.  
  388. figure.effect-ruby:hover h2 {
  389. -webkit-transform: translate3d(0,0,0);
  390. transform: translate3d(0,0,0);
  391. }
  392.  
  393. figure.effect-ruby:hover p {
  394. opacity: 1;
  395. -webkit-transform: translate3d(0,0,0) scale(1);
  396. transform: translate3d(0,0,0) scale(1);
  397. }
  398.  
  399. figure.effect-jazz {
  400. background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
  401. background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
  402. }
  403.  
  404. figure.effect-jazz img {
  405. opacity: 0.9;
  406. }
  407.  
  408. figure.effect-jazz figcaption::after,
  409. figure.effect-jazz img,
  410. figure.effect-jazz p {
  411. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  412. transition: opacity 0.35s, transform 0.35s;
  413. }
  414.  
  415. figure.effect-jazz figcaption::after {
  416. position: absolute;
  417. top: 0;
  418. left: 0;
  419. width: 300px;
  420. height: 200px;
  421. border-top: 1px solid #fff;
  422. border-bottom: 1px solid #fff;
  423. content: '';
  424. opacity: 0;
  425. -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
  426. transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
  427. -webkit-transform-origin: 50% 50%;
  428. transform-origin: 50% 50%;
  429. }
  430.  
  431. figure.effect-jazz h2,
  432. figure.effect-jazz p {
  433. opacity: 1;
  434. width:220px;
  435. -webkit-transform: scale3d(0.8,0.8,1);
  436. transform: scale3d(0.8,0.8,1);
  437. }
  438.  
  439. figure.effect-jazz h2 {
  440. padding-top: 40px;
  441. width:240px;
  442. -webkit-transition: -webkit-transform 0.35s;
  443. transition: transform 0.35s;
  444. }
  445.  
  446. figure.effect-jazz p {
  447. padding: 0.5em 1em;
  448. text-transform: none;
  449. font-size: 0.85em;
  450. opacity: 0;
  451. }
  452.  
  453. figure.effect-jazz:hover img {
  454. opacity: 0.7;
  455. -webkit-transform: scale3d(1.05,1.05,1);
  456. transform: scale3d(1.05,1.05,1);
  457. }
  458.  
  459. figure.effect-jazz:hover figcaption::after {
  460. opacity: 1;
  461. -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
  462. transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
  463. }
  464.  
  465. figure.effect-jazz:hover h2,
  466. figure.effect-jazz:hover p {
  467. opacity: 1;
  468. -webkit-transform: scale3d(1,1,1);
  469. transform: scale3d(1,1,1);
  470. }
  471.  
  472. figure.effect-ming {
  473. background: #030c17;
  474. }
  475.  
  476. figure.effect-ming img {
  477. opacity: 0.9;
  478. -webkit-transition: opacity 0.35s;
  479. transition: opacity 0.35s;
  480. }
  481.  
  482. figure.effect-ming figcaption::before {
  483. position: absolute;
  484. top: 20px;
  485. right: 20px;
  486. bottom: 20px;
  487. left: 20px;
  488. width:259px;
  489. height:160px;
  490. border: 2px solid #fff;
  491. box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
  492. content: '';
  493. opacity: 0;
  494. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  495. transition: opacity 0.35s, transform 0.35s;
  496. -webkit-transform: scale3d(1.4,1.4,1);
  497. transform: scale3d(1.4,1.4,1);
  498. }
  499.  
  500. figure.effect-ming h2 {
  501. width:250px;
  502. margin: 20px 0 10px 0;
  503. -webkit-transition: -webkit-transform 0.35s;
  504. transition: transform 0.35s;
  505. }
  506.  
  507. figure.effect-ming p {
  508. padding: 1em 0;
  509. width:250px;
  510. opacity: 0;
  511. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  512. transition: opacity 0.35s, transform 0.35s;
  513. -webkit-transform: scale(1.5);
  514. transform: scale(1.5);
  515. }
  516.  
  517. figure.effect-ming:hover h2 {
  518. -webkit-transform: scale(0.9);
  519. transform: scale(0.9);
  520. }
  521.  
  522. figure.effect-ming:hover figcaption::before,
  523. figure.effect-ming:hover p {
  524. opacity: 1;
  525. -webkit-transform: scale3d(1,1,1);
  526. transform: scale3d(1,1,1);
  527. }
  528.  
  529. figure.effect-ming:hover figcaption {
  530. background-color: rgba(58,52,42,0);
  531. }
  532.  
  533. figure.effect-ming:hover img {
  534. opacity: 0.4;
  535. }
  536.  
  537. figure.effect-selena {
  538. background: #fff;
  539. }
  540.  
  541. figure.effect-selena img {
  542. opacity: 0.95;
  543. -webkit-transition: -webkit-transform 0.35s;
  544. transition: transform 0.35s;
  545. -webkit-transform-origin: 50% 50%;
  546. transform-origin: 50% 50%;
  547. }
  548.  
  549. figure.effect-selena:hover img {
  550. -webkit-transform: scale3d(0.95,0.95,1);
  551. transform: scale3d(0.95,0.95,1);
  552. }
  553.  
  554. figure.effect-selena h2 {
  555. width:240px;
  556. -webkit-transition: -webkit-transform 0.35s;
  557. transition: transform 0.35s;
  558. -webkit-transform: translate3d(0,20px,0);
  559. transform: translate3d(0,20px,0);
  560. }
  561.  
  562. figure.effect-selena p {
  563. opacity: 0;
  564. width:240px;
  565. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  566. transition: opacity 0.35s, transform 0.35s;
  567. -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
  568. transform: perspective(1000px) rotate3d(1,0,0,90deg);
  569. -webkit-transform-origin: 50% 0%;
  570. transform-origin: 50% 0%;
  571. }
  572.  
  573. figure.effect-selena:hover h2 {
  574. -webkit-transform: translate3d(0,0,0);
  575. transform: translate3d(0,0,0);
  576. }
  577.  
  578. figure.effect-selena:hover p {
  579. opacity: 1;
  580. -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
  581. transform: perspective(1000px) rotate3d(1,0,0,0);
  582. }
  583.  
  584. figure.effect-roxy {
  585. background: -webkit-linear-gradient(135deg, #ff89e9 0%, #05abe0 100%);
  586. background: linear-gradient(135deg, #ff89e9 0%,#05abe0 100%);
  587. }
  588.  
  589. figure.effect-roxy img {
  590. max-width: none;
  591. width: -webkit-calc(100% + 60px);
  592. width: calc(100% + 60px);
  593. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  594. transition: opacity 0.35s, transform 0.35s;
  595. -webkit-transform: translate3d(-50px,0,0);
  596. transform: translate3d(-50px,0,0);
  597. }
  598.  
  599. figure.effect-roxy figcaption::before {
  600. position: absolute;
  601. top: 30px;
  602. right: 30px;
  603. bottom: 30px;
  604. left: 30px;
  605. width:240px;
  606. height:145px;
  607. border: 1px solid #fff;
  608. content: '';
  609. opacity: 0;
  610. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  611. transition: opacity 0.35s, transform 0.35s;
  612. -webkit-transform: translate3d(-20px,0,0);
  613. transform: translate3d(-20px,0,0);
  614. }
  615.  
  616. figure.effect-roxy figcaption {
  617. padding: 3em;
  618. text-align: left;
  619. }
  620.  
  621. figure.effect-roxy h2 {
  622. padding: 30px 0 10px 0;
  623. width:240px;
  624. }
  625.  
  626. figure.effect-roxy p {
  627. opacity: 0;
  628. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  629. transition: opacity 0.35s, transform 0.35s;
  630. -webkit-transform: translate3d(-10px,0,0);
  631. transform: translate3d(-10px,0,0);
  632. }
  633.  
  634. figure.effect-roxy:hover img {
  635. opacity: 0.7;
  636. -webkit-transform: translate3d(0,0,0);
  637. transform: translate3d(0,0,0);
  638. }
  639.  
  640. figure.effect-roxy:hover figcaption::before,
  641. figure.effect-roxy:hover p {
  642. opacity: 1;
  643. -webkit-transform: translate3d(0,0,0);
  644. transform: translate3d(0,0,0);
  645. }
  646.  
  647. figure.effect-chico {
  648. background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
  649. background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
  650. }
  651.  
  652. figure.effect-chico img {
  653. opacity:0.9;
  654. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  655. transition: opacity 0.35s, transform 0.35s;
  656. -webkit-transform: scale3d(1.05,1.05,1);
  657. transform: scale3d(1.05,1.05,1);
  658. }
  659.  
  660. figure.effect-chico:hover img {
  661. opacity: 0.6;
  662. -webkit-transform: scale3d(1,1,1);
  663. transform: scale3d(1,1,1);
  664. }
  665.  
  666. figure.effect-chico figcaption {
  667. padding: 3em 0;
  668. }
  669.  
  670. figure.effect-chico figcaption::before {
  671. position: absolute;
  672. top: 20px;
  673. right: 20px;
  674. bottom: 20px;
  675. left: 20px;
  676. width:260px;
  677. height:160px;
  678. border: 1px solid #fff;
  679. content: '';
  680. -webkit-transform: scale(1.1);
  681. transform: scale(1.1);
  682. }
  683.  
  684. figure.effect-chico figcaption::before,
  685. figure.effect-chico p {
  686. opacity: 0;
  687. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  688. transition: opacity 0.35s, transform 0.35s;
  689. }
  690.  
  691. figure.effect-chico h2 {
  692. padding: 40px 0 20px 0;
  693. width:300px;
  694. }
  695.  
  696. figure.effect-chico p {
  697. margin: 0 auto;
  698. width: 210px;
  699. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  700. transition: opacity 0.35s, transform 0.35s;
  701. -webkit-transform: scale(1.12);
  702. transform: scale(1.12);
  703.  
  704. }
  705.  
  706. figure.effect-chico:hover figcaption::before,
  707. figure.effect-chico:hover p {
  708. opacity: 1;
  709. -webkit-transform: scale(1);
  710. transform: scale(1);
  711. }
  712.  
  713. figure.effect-marley figcaption {
  714. text-align: right;
  715. }
  716.  
  717. figure.effect-marley h2,
  718. figure.effect-marley p {
  719. position: absolute;
  720. right: 30px;
  721. left: 30px;
  722. padding: 10px 0;
  723. }
  724.  
  725.  
  726. figure.effect-marley p {
  727. bottom: 70px;
  728. line-height: 1.5;
  729. width:240px;
  730. -webkit-transform: translate3d(0,100%,0);
  731. transform: translate3d(0,100%,0);
  732. }
  733.  
  734. figure.effect-marley h2 {
  735. top: 10px;
  736. width:240px;
  737. -webkit-transition: -webkit-transform 0.35s;
  738. transition: transform 0.35s;
  739. -webkit-transform: translate3d(0,20px,0);
  740. transform: translate3d(0,20px,0);
  741. }
  742.  
  743. figure.effect-marley:hover h2 {
  744. -webkit-transform: translate3d(0,0,0);
  745. transform: translate3d(0,0,0);
  746. }
  747.  
  748. figure.effect-marley h2::after {
  749. position: absolute;
  750. top: 100%;
  751. left: 0;
  752. width: 100%;
  753. height: 4px;
  754. background: #fff;
  755. content: '';
  756. -webkit-transform: translate3d(0,40px,0);
  757. transform: translate3d(0,40px,0);
  758. }
  759.  
  760. figure.effect-marley h2::after,
  761. figure.effect-marley p {
  762. opacity: 0;
  763. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  764. transition: opacity 0.35s, transform 0.35s;
  765. }
  766.  
  767. figure.effect-marley:hover h2::after,
  768. figure.effect-marley:hover p {
  769. opacity: 1;
  770. -webkit-transform: translate3d(0,0,0);
  771. transform: translate3d(0,0,0);
  772. }
  773.  
  774. figure.effect-lily {
  775. background:#726B62;
  776. background: -webkit-linear-gradient(top, rgba(170, 97, 8,1) 0%, rgba(0,0,0,1) 100%);
  777. background: linear-gradient(to bottom, rgba(170, 97, 8,1) 0%,rgba(0,0,0,1) 100%);
  778. }
  779.  
  780. figure.effect-lily img {
  781. max-width: none;
  782. width: -webkit-calc(100% + 50px);
  783. width: calc(100% + 50px);
  784. opacity: 0.7;
  785. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  786. transition: opacity 0.35s, transform 0.35s;
  787. -webkit-transform: translate3d(-40px,0, 0);
  788. transform: translate3d(-40px,0,0);
  789. }
  790.  
  791. figure.effect-lily figcaption {
  792. text-align: left;
  793. }
  794.  
  795. figure.effect-lily figcaption > div {
  796. position: absolute;
  797. bottom: 0;
  798. left: 0;
  799. padding: 2em;
  800. width: 100%;
  801. height: 50%;
  802. }
  803.  
  804. figure.effect-lily h2,
  805. figure.effect-lily p {
  806. width:250px;
  807. -webkit-transform: translate3d(0,40px,0);
  808. transform: translate3d(0,40px,0);
  809. }
  810.  
  811. figure.effect-lily h2 {
  812. -webkit-transition: -webkit-transform 0.35s;
  813. transition: transform 0.35s;
  814. }
  815.  
  816. figure.effect-lily p {
  817. color: rgba(255,255,255,0.8);
  818. opacity: 0;
  819. -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
  820. transition: opacity 0.2s, transform 0.35s;
  821. }
  822.  
  823. figure.effect-lily:hover img,
  824. figure.effect-lily:hover p {
  825. opacity: 1;
  826. }
  827.  
  828. figure.effect-lily:hover img,
  829. figure.effect-lily:hover h2,
  830. figure.effect-lily:hover p {
  831. -webkit-transform: translate3d(0,0,0);
  832. transform: translate3d(0,0,0);
  833. }
  834.  
  835. figure.effect-lily:hover p {
  836. -webkit-transition-delay: 0.05s;
  837. transition-delay: 0.05s;
  838. -webkit-transition-duration: 0.35s;
  839. transition-duration: 0.35s;
  840. }
  841.  
  842. </style>
  843. </head>
  844. <body>
  845.  
  846. <div class="grid" style="height:140px">
  847. <figure class="effect-roxy">
  848. <img src="https://farm4.staticflickr.com/3870/14371657298_9dae2317ce.jpg" alt="img11"/>
  849. <figcaption>
  850. <h2>My <span>Title</span></h2>
  851. <p><i>Sample Text</i><br>
  852. </p>
  853. </figcaption>
  854. </figure>
  855. <figure class="effect-jazz">
  856. <img src="https://38.media.tumblr.com/5033c40f542749191a361f201a772dc0/tumblr_n201x7855V1svrh8zo3_1280.jpg" alt="img03"/>
  857. <figcaption>
  858. <h2>My <span>Title</span></h2>
  859. <p><i>Sample Text</i><br>
  860. </p>
  861. </figcaption>
  862. </figure>
  863. <figure class="effect-milo">
  864. <img src="https://farm6.staticflickr.com/5579/14210468845_351e934bf8_o_d.jpg"/>
  865. <figcaption>
  866. <h2>My <span>Title</span></h2>
  867. <p><i>Sample Text</i><br>
  868. </p>
  869. </figcaption>
  870. </figure>
  871. </div>
  872.  
  873. <div class="grid" style="height:140px">
  874. <figure class="effect-apollo">
  875. <img src="http://static.tumblr.com/vmteopo/r6Tnhop3z/ocean_nami.jpg">
  876. <figcaption>
  877. <h2>My <span>Title</span></h2>
  878. <p><i>Sample Text</i><br>
  879. </p>
  880. </figcaption>
  881. </figure>
  882.  
  883. <figure class="effect-dexter">
  884. <img src="https://ununsplash.imgix.net/photo-1415226620463-aedee27159c5?q=75&fm=jpg&s=a455a083c2fcff54c2127af43cdcacc5"/>
  885. <figcaption>
  886. <h2>My <span>Title</span></h2>
  887. <p><i>Sample Text</i><br>
  888. </p>
  889. </figcaption>
  890. </figure>
  891. <figure class="effect-sarah">
  892. <img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580?q=75&fm=jpg&s=d1c3df390a81d3371d05730a396ca390"/>
  893. <figcaption>
  894. <h2>My <span>Title</span></h2>
  895. <p><i>Sample Text</i><br>
  896. </p>
  897. </figcaption>
  898. </figure>
  899. </div>
  900.  
  901. <div class="grid" style="height:140px">
  902. <figure class="effect-ruby">
  903. <img src="https://40.media.tumblr.com/c833155636d38170e5906f530438b2ee/tumblr_mx0cpjfXuk1sial0xo1_500.jpg"/>
  904. <figcaption>
  905. <h2>My <span>Title</span></h2>
  906. <p><i>Sample Text</i><br>
  907. </p>
  908. </figcaption>
  909. </figure>
  910. <figure class="effect-ming">
  911. <img src="https://40.media.tumblr.com/cd2dffa823a0998266fde32ec9d0e8b1/tumblr_myjeycX60R1sors5to1_400.jpg"/>
  912. <figcaption>
  913. <h2>My <span>Title</span></h2>
  914. <p><i>Sample Text</i><br>
  915. </p>
  916. </figcaption>
  917. </figure>
  918. <figure class="effect-selena">
  919. <img src="https://farm6.staticflickr.com/5479/10566885854_8f4b0088a1_k.jpg"/>
  920. <figcaption>
  921. <h2>My <span>Title</span></h2>
  922. <p><i>Sample Text</i><br>
  923. </p>
  924. </figcaption>
  925. </figure>
  926. </div>
  927.  
  928. <div class="grid">
  929. <figure class="effect-lily">
  930. <img src="https://farm8.staticflickr.com/7491/15909780576_6390d3e191_z_d.jpg"/>
  931. <figcaption>
  932. <h2>My <span>Title</span></h2>
  933. <p><i>Sample Text</i><br>
  934. </p>
  935. </figcaption>
  936. </figure>
  937. <figure class="effect-chico">
  938. <img src="http://tympanus.net/Development/HoverEffectIdeas/img/4.jpg"/>
  939. <figcaption>
  940. <h2>My <span>Title</span></h2>
  941. <p><i>Sample Text</i><br>
  942. </p>
  943. </figcaption>
  944. </figure>
  945. <figure class="effect-marley">
  946. <img src="https://41.media.tumblr.com/1bbdf846c937466ba947723a08803bb2/tumblr_n104qjwSip1qfvrzvo1_400.jpg"/>
  947. <figcaption>
  948. <h2>My <span>Title</span></h2>
  949. <p><i>Sample Text</i><br>
  950. </p>
  951. </figcaption>
  952. </figure>
  953.  
  954. </div>
  955. </body>
  956. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!