Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .collage {
- background: #fff url(../images/hero-img.jpg) no-repeat center center;
- background-size: cover;
- height: 200px;
- padding: 0;
- }
- .collage-wrap a {
- text-decoration: none;;
- }
- /* sm */
- @media (min-width: 768px) {
- .collage-wrap {
- height: 44vh;
- }
- .collage-inner-wrap {
- height: 50%;
- }
- .collage {
- height: 100%;
- }
- }
- /* Show the overlay and text on screens smaller than 992 */
- .hvr-sweep-to-right {
- align-items: center;
- background: rgba(0, 0, 0, 0.55);
- display: flex;
- justify-content: center;
- height: 100%;
- opacity: 1;
- position: relative;
- width: 100%;
- }
- .hvr-sweep-to-right p {
- color: #ffffff;
- opacity: 1;
- }
- /* Hover effects 992 and larger*/
- @media (min-width: 992px) {
- .hvr-sweep-to-right {
- background: none;
- opacity: 0;
- position: relative;
- transform: perspective(1px) translateZ(0px);
- transition-duration: 0.5s;
- }
- .hvr-sweep-to-right::before {
- background: rgba(0, 0, 0, 0.8);
- bottom: 0;
- content: "";
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- transform: scaleX(0);
- transform-origin: 0 50% 0;
- transition-duration: 0.3s;
- transition-property: transform;
- transition-timing-function: ease-out;
- z-index: -1;
- }
- .hvr-sweep-to-right:hover,
- .hvr-sweep-to-right:focus,
- .hvr-sweep-to-right:active {
- opacity: 1;
- }
- .hvr-sweep-to-right:hover::before,
- .hvr-sweep-to-right:focus::before,
- .hvr-sweep-to-right:active::before {
- transform: scaleX(1);
- }
- .hvr-sweep-to-right p {
- color: transparent;
- opacity: 0;
- transition-delay: 0.5s;
- transition-duration: 0.25s;
- }
- .hvr-sweep-to-right:hover p {
- color: #ffffff;
- opacity: 1;
- }
- }
Add Comment
Please, Sign In to add comment