0

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

1 respuesta 1

0

Buenas amigo espero esto sea lo que buscas

En el css agregue

.s--active .snip1273:hover figcaption,
.s--active .snip1273.hover figcaption {
  opacity: 0;
  visibility:hidden;
}

Cuando activas la imagen para ser visualizada le agregas una classe .s--active cuando la tenga que no muestre la descripción

Espero te ayude saludos

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;
}
/*codigo nuevo*/
 .s--active .snip1273:hover figcaption,
 .s--active .snip1273.hover figcaption {
  opacity: 0;
  visibility:hidden;
}
/*codigo nuevo*/
 .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>

6
  • Gracias @luis Daniel Rovira Contreras, sos un genio!!!
    – MarianoF
    Commented el 27 nov. 2017 a las 11:45
  • De nada amigo si la Respuesta es correcta por favor dale como respondida para que la comunidad sepa saludos y espero te ayude Commented el 27 nov. 2017 a las 12:46
  • Te hago una ultima pregunta si no es mucha molestia y complicación, no se si probaste el ejemplo con una imagen adjunta, te explico cada fila tiene una imagen de fondo que cuando pasas el mouse por arriba hace el hover, esa imagen que muestra al comienzo seria como un pedazo de una imagen mas grande, ahora bien cuando clickeas debería mostrarse al 100% de la caja que la contiene osea a la mitad cuando esta expandida la caja, nose si me explico. te adjunto el link del proyecto con una foto que agregue yo que seria la original qkstudiodemo.com/radiocantilo/html
    – MarianoF
    Commented el 27 nov. 2017 a las 12:53
  • Creo mas o menos entenderte, la imagen que tienes que usar debe tener el tamaño del ancho final osea despues de darle click pero cuando todavia no le has dado que tenga un contenedor con overflow:hidden de un width del tamaño deseado osea (200px) y cuando le das click ese contenedor se pone al 100% y la imagen se vera completa Commented el 27 nov. 2017 a las 13:14
  • Claro! si eso mismo voy a probar
    – MarianoF
    Commented el 27 nov. 2017 a las 14:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.