.sadie{
}
div.effect-sadie {
position: relative;
overflow: hidden;
text-align: center;
cursor: pointer;
min-height:250px;
}
div.effect-sadie::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(55,176,186,0) 0%, rgba(55,176,186,0.8) 75%);
background: linear-gradient(to bottom, rgba(55,176,186,0) 0%, rgba(55,176,186,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
div.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff !important;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translatTestioe3d(0,-50%,0);
transform: translate3d(0,-50%,0);
text-align:center;
}
div.effect-sadie::before,
div.effect-sadie .paragrafo-custom {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
div.effect-sadie .paragrafo-custom {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
text-align:center;
}
div.effect-sadie:hover h2 {
color: #fff !important;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
div.effect-sadie:hover::before ,
div.effect-sadie:hover .paragrafo-custom {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
color: #fff !important;
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.