Hola estoy haciendo una galería, que contiene información e imagen. Estas 6 columnas poseen contenido oculto que al clickear se expande y muestra la información de dicha ficha. A estas imágenes en su estado de reposo tienen un efecto de hover donde contenido de texto se muestra por encima. Este contenido puede ser el mismo que iría dentro de dicha ficha cuando se expande. Ahora el problema surje cuando expando la imagen y el contenido de texto del hover se queda. como haría
var $cont = document.querySelector('.cont');
var $elsArr = [].slice.call(document.querySelectorAll('.el'));
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));
setTimeout(function() {
$cont.classList.remove('s--inactive');
}, 200);
$elsArr.forEach(function($el) {
$el.addEventListener('click', function() {
if (this.classList.contains('s--active')) return;
$cont.classList.add('s--el-active');
this.classList.add('s--active');
});
});
$closeBtnsArr.forEach(function($btn) {
$btn.addEventListener('click', function(e) {
e.stopPropagation();
$cont.classList.remove('s--el-active');
document.querySelector('.el.s--active').classList.remove('s--active');
});
});
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.cont{
width: 1170px;
margin: auto;
height: 404px;
position: relative;
}
.el {
position: absolute;
left: 0;
top: 0;
width: 15.999%;
height: 100%;
background: #252525;
-webkit-transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
will-change: transform, width, opacity;
}
.el:not(.s--active) {
cursor: pointer;
}
.el__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.el__inner {
overflow: hidden;
position: relative;
height: 100%;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
.el__preview-cont{
z-index: 22;
position: absolute;
top: 0;
width: 250px;
height: 401px;
}
.el__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.el.s--active .el__content {
z-index: 2;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.5s 1.4s;
transition: all 0.5s 1.4s;
}
.imagen{
background-image: url('../salvapantallas.jpg');
width: 405px;
background-repeat: no-repeat;
height: 403px;
}
.snip1273 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
margin: 0px;
min-width: 403px;
max-width: 403px;
width: 100%;
color: #ffffff;
text-align: left;
font-size: 16px;
}
.snip1273 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.snip1273 img {
position: relative;
max-width: 100%;
vertical-align: top;
}
.snip1273 figcaption {
position: relative;
top: 0;
left: 0;
width: 187px;
height: 100%;
z-index: 1;
opacity: 0;
padding: 77px 20px 0px 20px;
}
.snip1273 figcaption .flecha{
margin-top: 49px;
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
width: 1px;
height: 0;
}
.snip1273 figcaption:before {
right: 0;
top: 0;
}
.snip1273 figcaption:after {
left: 0;
bottom: 0;
}
.snip1273 span,
.snip1273 p {
line-height: 1.5em;
}
.snip1273 span {
font-weight: 700;
font-size: 71px;
text-align: center;
font-family: 'helvetica';
text-transform: uppercase;
margin: 0;
height: 76px;
display: block;
}
.snip1273 p {
font-size: 0.8em;
text-align: center;
font-weight: 500;
margin: 0 0 15px;
}
.snip1273 a {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
.snip1273:before,
.snip1273:after,
.snip1273 figcaption:before,
.snip1273 figcaption:after {
position: absolute;
content: '';
background-color: #ffffff;
z-index: 1;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
opacity: 0.8;
}
.snip1273:hover img,
.snip1273.hover img {
opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
opacity: 1;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
opacity: 0.1;
}
.el__text .img {
width: 403px;
height: 402px;
float: left;
}
.el__text .description{
width: 765px;
float: right;
padding: 30px;
height: 403px;
}
.el__text img{
width: 100%;
max-width: 344px;
min-width: 401px;
}
.el__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0s 0.45s;
transition: all 0s 0.45s;
cursor: pointer;
}
.el.s--active .el__close-btn {
z-index: 5;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0s 1.4s;
transition: all 0s 1.4s;
}
.el__close-btn:before, .el__close-btn:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
opacity: 1;
}
.el__close-btn:before {
-webkit-transform: rotate(45deg) translateX(100%);
transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
-webkit-transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
-webkit-transform: rotate(45deg) translateX(0);
transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
-webkit-transform: rotate(-45deg) translateX(100%);
transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
-webkit-transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
-webkit-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
.el:nth-child(1) {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(0%, 0, 0);
transform: scale(0.5) translate3d(0%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(1) .el__inner {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.el:nth-child(1) .el__inner:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
background-image: url("../salvapantallas.jpg");
}
.el:nth-child(2) {
-webkit-transform: translate3d(105.20833%, 0, 0);
transform: translate3d(105.20833%, 0, 0);
-webkit-transform-origin: 155.20833% 50%;
transform-origin: 155.20833% 50%;
}
.cont.s--el-active .el:nth-child(2):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(105.20833%, 0, 0);
transform: scale(0.5) translate3d(105.20833%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(2) .el__inner {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.el:nth-child(2) .el__bg {
-webkit-transform: translate3d(-19.2%, 0, 0);
transform: translate3d(-19.2%, 0, 0);
}
.el:nth-child(2) .el__bg:before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-4.jpg");
}
.el:nth-child(3) {
-webkit-transform: translate3d(210.41667%, 0, 0);
transform: translate3d(210.41667%, 0, 0);
-webkit-transform-origin: 260.41667% 50%;
transform-origin: 260.41667% 50%;
}
.cont.s--el-active .el:nth-child(3):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(210.41667%, 0, 0);
transform: scale(0.5) translate3d(210.41667%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(3) .el__inner {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.el:nth-child(3) .el__bg {
-webkit-transform: translate3d(-38.4%, 0, 0);
transform: translate3d(-38.4%, 0, 0);
}
.el:nth-child(3) .el__bg:before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-5.jpg");
}
.el:nth-child(4) {
-webkit-transform: translate3d(315.625%, 0, 0);
transform: translate3d(315.625%, 0, 0);
-webkit-transform-origin: 365.625% 50%;
transform-origin: 365.625% 50%;
}
.cont.s--el-active .el:nth-child(4):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(315.625%, 0, 0);
transform: scale(0.5) translate3d(315.625%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(4) .el__inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.el:nth-child(4) .el__bg {
-webkit-transform: translate3d(-57.6%, 0, 0);
transform: translate3d(-57.6%, 0, 0);
}
.el:nth-child(4) .el__bg:before {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-6.jpg");
}
.el:nth-child(5) {
-webkit-transform: translate3d(420.83333%, 0, 0);
transform: translate3d(420.83333%, 0, 0);
-webkit-transform-origin: 470.83333% 50%;
transform-origin: 470.83333% 50%;
}
.el:nth-child(6) {
-webkit-transform: translate3d(527%, 0, 0);
transform: translate3d(527%, 0, 0);
-webkit-transform-origin: 527% 50%;
transform-origin: 527% 50%;
}
.cont.s--el-active .el:nth-child(6):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(0%, 0, 0);
transform: scale(0.5) translate3d(0%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(6) .el__inner {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.el:nth-child(6) .el__bg {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.el:nth-child(6) .el__inner:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
background-image: url("../salvapantallas.jpg");
}
.cont.s--el-active .el:nth-child(5):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(420.83333%, 0, 0);
transform: scale(0.5) translate3d(420.83333%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(5) .el__inner {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.el:nth-child(5) .el__bg {
-webkit-transform: translate3d(-76.8%, 0, 0);
transform: translate3d(-76.8%, 0, 0);
}
.el:nth-child(5) .el__bg:before {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-7.jpg");
}
.el:hover .el__bg:after {
opacity: 0;
}
.el.s--active {
z-index: 1;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
transition: transform 0.6s, width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
}
.el.s--active .el__bg {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
.el.s--active .el__bg:before {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="cont s--inactive">
<!-- cont inner start -->
<div >
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__preview-cont">
<div class="el__heading">
<div class="imagen snip1273">
<figcaption>
<span>“</span>
<p>Nunc feugiat tempus enim.Nulla ipsum massa, portavel magna eu, dapibus efficitur eros.</p>
<img class="center-block img-responsive flecha" src="images/arrow-right.png">
</figcaption>
</div>
</div>
</div>
<div class="el__content">
<div class="el__text">
<div class="img">
</div>
<div class="description">lorem dasd</div>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__preview-cont" style="z-index: 22;position: absolute; top: 0; width: 250px;height: 401px;background: red;">
<div class="el__heading">
<img src="salvapantallas.jpg">
<h2 style="position: absolute;top: 0;">mariano</h2>
</div>
</div>
<div class="el__content">
<div class="el__text">
<div class="img">
</div>
<div class="description">lorem dasd</div>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__preview-cont" style="z-index: 22;position: absolute; top: 0; width: 250px;height: 401px;background: red;">
<div class="el__heading">
<img src="salvapantallas.jpg">
<h2 style="position: absolute;top: 0;">mariano</h2>
</div>
</div>
<div class="el__content">
<div class="el__text">
<div class="img">
</div>
<div class="description">lorem dasd</div>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__preview-cont" style="z-index: 22;position: absolute; top: 0; width: 250px;height: 401px;background: red;">
<div class="el__heading">
<img src="salvapantallas.jpg">
<h2 style="position: absolute;top: 0;">mariano</h2>
</div>
</div>
<div class="el__content">
<div class="el__text">
<div class="img">
</div>
<div class="description">lorem dasd</div>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__preview-cont" style="z-index: 22;position: absolute; top: 0; width: 250px;height: 401px;background: red;">
<div class="el__heading">
<img src="salvapantallas.jpg">
<h2 style="position: absolute;top: 0;">mariano</h2>
</div>
</div>
<div class="el__content">
<div class="el__text">
<div class="img">
</div>
<div class="description">lorem dasd</div>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__preview-cont" style="z-index: 22;position: absolute; top: 0; width: 250px;height: 401px;background: red;">
<div class="el__heading">
<img src="salvapantallas.jpg">
<h2 style="position: absolute;top: 0;">mariano</h2>
</div>
</div>
<div class="el__content">
<div class="el__text">
<div class="img">
</div>
<div class="description">lorem dasd</div>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
</div>
<!-- el end -->
</div>
<!-- cont inner end -->
</body>
</html>
para sacarlo cuando clickeo y me muestra el contenido de dicha ficha? le adjunto el ejemplo