Created
January 10, 2018 01:28
-
-
Save CNick/ed37b23d00e9a1a36a47d24ef6d4a6e7 to your computer and use it in GitHub Desktop.
CSS for custom image collage page template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment