Guest User

Untitled

a guest
Jan 18th, 2018
103
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.57 KB | None | 0 0
  1. .collage {
  2. background: #fff url(../images/hero-img.jpg) no-repeat center center;
  3. background-size: cover;
  4. height: 200px;
  5. padding: 0;
  6. }
  7. .collage-wrap a {
  8. text-decoration: none;;
  9. }
  10. /* sm */
  11. @media (min-width: 768px) {
  12. .collage-wrap {
  13. height: 44vh;
  14. }
  15. .collage-inner-wrap {
  16. height: 50%;
  17. }
  18. .collage {
  19. height: 100%;
  20. }
  21. }
  22. /* Show the overlay and text on screens smaller than 992 */
  23. .hvr-sweep-to-right {
  24. align-items: center;
  25. background: rgba(0, 0, 0, 0.55);
  26. display: flex;
  27. justify-content: center;
  28. height: 100%;
  29. opacity: 1;
  30. position: relative;
  31. width: 100%;
  32. }
  33. .hvr-sweep-to-right p {
  34. color: #ffffff;
  35. opacity: 1;
  36. }
  37. /* Hover effects 992 and larger*/
  38. @media (min-width: 992px) {
  39. .hvr-sweep-to-right {
  40. background: none;
  41. opacity: 0;
  42. position: relative;
  43. transform: perspective(1px) translateZ(0px);
  44. transition-duration: 0.5s;
  45. }
  46. .hvr-sweep-to-right::before {
  47. background: rgba(0, 0, 0, 0.8);
  48. bottom: 0;
  49. content: "";
  50. left: 0;
  51. position: absolute;
  52. right: 0;
  53. top: 0;
  54. transform: scaleX(0);
  55. transform-origin: 0 50% 0;
  56. transition-duration: 0.3s;
  57. transition-property: transform;
  58. transition-timing-function: ease-out;
  59. z-index: -1;
  60. }
  61. .hvr-sweep-to-right:hover,
  62. .hvr-sweep-to-right:focus,
  63. .hvr-sweep-to-right:active {
  64. opacity: 1;
  65. }
  66. .hvr-sweep-to-right:hover::before,
  67. .hvr-sweep-to-right:focus::before,
  68. .hvr-sweep-to-right:active::before {
  69. transform: scaleX(1);
  70. }
  71. .hvr-sweep-to-right p {
  72. color: transparent;
  73. opacity: 0;
  74. transition-delay: 0.5s;
  75. transition-duration: 0.25s;
  76. }
  77. .hvr-sweep-to-right:hover p {
  78. color: #ffffff;
  79. opacity: 1;
  80. }
  81. }
Add Comment
Please, Sign In to add comment