-
-
Save Roy-Oto/4063554aae53b2d46a60127baef79b5a to your computer and use it in GitHub Desktop.
CSS for displaying a three-column header in SANGO.
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
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700); | |
.snip1445 { | |
font-family: 'Raleway', Arial, sans-serif; | |
position: relative; | |
overflow: hidden; | |
margin: 0px; | |
min-width: 230px; | |
max-width: 500px; | |
width: 100%; | |
color: #ffffff; | |
text-align: center; | |
font-size: 16px; | |
background-color: #000000; | |
} | |
.snip1445 *, | |
.snip1445 *:before, | |
.snip1445 *:after { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-transition: all 0.55s ease; | |
transition: all 0.55s ease; | |
} | |
.snip1445 img { | |
max-width: 100%; | |
backface-visibility: hidden; | |
vertical-align: top; | |
} | |
.snip1445 figcaption { | |
position: absolute; | |
bottom: 25px; | |
right: 25px; | |
padding: 5px 10px 10px; | |
} | |
.snip1445 figcaption:before, | |
.snip1445 figcaption:after { | |
height: 2px; | |
width: 400px; | |
position: absolute; | |
content: ''; | |
background-color: #ffffff; | |
} | |
.snip1445 figcaption:before { | |
top: 0; | |
left: 0; | |
-webkit-transform: translateX(100%); | |
transform: translateX(100%); | |
} | |
.snip1445 figcaption:after { | |
bottom: 0; | |
right: 0; | |
-webkit-transform: translateX(-100%); | |
transform: translateX(-100%); | |
} | |
.snip1445 figcaption div:before, | |
.snip1445 figcaption div:after { | |
width: 2px; | |
height: 300px; | |
position: absolute; | |
content: ''; | |
background-color: #ffffff; | |
} | |
.snip1445 figcaption div:before { | |
top: 0; | |
left: 0; | |
-webkit-transform: translateY(100%); | |
transform: translateY(100%); | |
} | |
.snip1445 figcaption div:after { | |
bottom: 0; | |
right: 0; | |
-webkit-transform: translateY(-100%); | |
transform: translateY(-100%); | |
} | |
.snip1445 h2, | |
.snip1445 h4 { | |
margin: 0; | |
text-transform: uppercase; | |
} | |
.snip1445 h2 { | |
font-weight: 400; | |
} | |
.snip1445 h4 { | |
display: block; | |
font-weight: 700; | |
background-color: #ffffff; | |
padding: 5px 10px; | |
color: #000000; | |
} | |
.snip1445 a { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.snip1445:hover img, | |
.snip1445.hover img { | |
zoom: 1; | |
filter: alpha(opacity=50); | |
-webkit-opacity: 0.5; | |
opacity: 0.5; | |
} | |
.snip1445:hover figcaption:before, | |
.snip1445.hover figcaption:before, | |
.snip1445:hover figcaption:after, | |
.snip1445.hover figcaption:after, | |
.snip1445:hover figcaption div:before, | |
.snip1445.hover figcaption div:before, | |
.snip1445:hover figcaption div:after, | |
.snip1445.hover figcaption div:after { | |
-webkit-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
.snip1445:hover figcaption:before, | |
.snip1445.hover figcaption:before, | |
.snip1445:hover figcaption:after, | |
.snip1445.hover figcaption:after { | |
-webkit-transition-delay: 0.15s; | |
transition-delay: 0.15s; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment