Last active
March 14, 2019 17:05
-
-
Save diviconnet/7f1cb756d80144b544bab2bcc5b90a7d to your computer and use it in GitHub Desktop.
CSS EN DIVI EFECTOS HOVER AVANZADOS PARTE 2
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
.grid { | |
position: relative; | |
margin: 0 auto; | |
padding: 1em 0 4em; | |
max-width: 1000px; | |
list-style: none; | |
text-align: center; | |
} | |
/* Common style */ | |
.grid figure { | |
position: relative; | |
float: left; overflow: hidden; | |
margin: 10px 1%; | |
min-width: 320px; | |
max-width: 480px; | |
max-height: 360px; | |
width: 100%; | |
background: #3085a3; | |
text-align: center; | |
cursor: pointer; | |
} | |
.grid figure img { | |
position: relative; | |
display: block; | |
min-height: 100%; | |
max-width: 100%; | |
opacity: 0.8; | |
} | |
.grid figure figcaption { | |
padding: 2em; | |
color: #fff; | |
/*Color del Subtitulo*/ | |
text-transform: uppercase; | |
font-size: 1.25em; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.grid figure figcaption::before, | |
.grid figure figcaption::after { | |
pointer-events: none; | |
} | |
.grid figure figcaption, | |
.grid figure figcaption a { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
/* Anchor will cover the whole item by default */ | |
/* For some effects it will show as a button */ | |
.grid figure figcaption a { | |
z-index: 1000; | |
text-indent: 200%; | |
white-space: nowrap; | |
font-size: 0; | |
opacity: 0; | |
} | |
.grid figure h2 { word-spacing: -0.15em; font-weight: 300; | |
} | |
.grid figure h2 span { font-weight: 800; | |
} | |
.grid figure h2, | |
.grid figure p { | |
margin: 0; } | |
.grid figure p { | |
letter-spacing: 1px; | |
font-size: 68.5%; | |
} |
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
/*---------------*/ | |
/***** Layla *****/ | |
/*---------------*/ | |
figure.effect-layla { | |
background: #18a367; /*Color del fondo de la imagen*/ | |
} | |
figure.effect-layla img { | |
height: 390px; | |
} | |
figure.effect-layla figcaption { | |
padding: 3em; | |
} | |
figure.effect-layla figcaption::before, figure.effect-layla figcaption::after { | |
position: absolute; | |
content: ''; | |
opacity: 0; | |
} | |
figure.effect-layla figcaption::before { top: 50px; | |
right: 30px; | |
bottom: 50px; | |
left: 30px; | |
border-top: 1px solid #fff; /*Color y anchura de las barras | |
superior*/ | |
border-bottom: 1px solid #fff; /*Color y anchura de las barras | |
posterior*/ | |
-webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; | |
} | |
figure.effect-layla figcaption::after { top: 30px; | |
right: 50px; | |
bottom: 30px; | |
left: 50px; | |
border-right: 1px solid #fff; /*Color y anchura de la barra | |
derecha*/ | |
border-left: 1px solid #fff; /*Color y anchura de la barra | |
izquierda*/ | |
-webkit-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; | |
} | |
figure.effect-layla h2 { | |
padding-top: 26%; | |
-webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; | |
} | |
figure.effect-layla p { | |
padding: 0.5em 2em; | |
text-transform: none; | |
opacity: 0; | |
-webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); | |
} | |
figure.effect-layla img, | |
figure.effect-layla h2 { | |
-webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); | |
} | |
figure.effect-layla img, figure.effect-layla figcaption::before, figure.effect-layla figcaption::after, figure.effect-layla p { | |
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | |
transition: opacity 0.35s, transform 0.35s; } | |
figure.effect-layla:hover img { | |
opacity: 0.7; | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
figure.effect-layla:hover figcaption::before, figure.effect-layla:hover figcaption::after { | |
opacity: 1; | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
figure.effect-layla:hover h2, | |
figure.effect-layla:hover p { | |
opacity: 1; | |
-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); | |
} | |
figure.effect-layla:hover figcaption::after, figure.effect-layla:hover h2, figure.effect-layla:hover p, figure.effect-layla:hover img { | |
-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