-->
*, *::before, *::after{
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
html, body{
margin: 0px;
padding: 0px;
font-family: 'Lato',sans-serif;
font-size: 18px;
font-weight: 300;
height: 100%;
color: #fff;
}
.container{
width: 1024px;
max-width: 100%;
margin: auto;
display: block;
text-align: center;
}
.hero{
width: 100%;
height: 40%;
background: #3498db;
display: table;
}
h1{
color: #2c3e50;
text-align: center;
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-weight: 300;
}
figure{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: 1em;
}
figcaption{
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
text-align: center;
font-weight: bold;
width: 100%;
height: 100%;
display: table;
}
figcaption div{
display: table-cell;
vertical-align: middle;
position: relative;
top: 20px;
opacity: 0;
color: #2c3e50;
text-transform: uppercase;
}
figcaption div:after{
position: absolute;
content: "";
left: 0; right: 0;
bottom: 40%;
text-align: center;
margin: auto;
width: 0%;
height: 2px;
background: #2c3e50;
}
figure img{
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
figure:hover figcaption{
background: rgba(255,255,255,0.3);
}
figcaption:hover div{
opacity: 1;
top: 0;
}
figcaption:hover div:after{
width: 50%;
}
figure:hover img{
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
/*font-face*/
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
0 comentários:
Postar um comentário