Problems with jquery gallery

Question

Problems with jquery gallery

Navigation

#1 by (0 votes)

0

Hi, I'm doing a gallery, which contains information and image. These 6 columns have hidden content that, when clicked, expands and displays the information of said file. These images in their idle state have a hover effect where text content is shown above. This content may be the same as it would be inside that file when it expands. Now the problem arises when expanding the image and the text content of the hover remains. how would he do

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>

to get it out when I click and show me the contents of that tab? I attached the example

javascript jquery html css3

asked by MarianoF 27.11.2017 в 02:47

source

1 answer

How do I show toast or toast every time my list increases or decreases? Get all values 0 in mysql query

score 0 · Answer 1

Good friend I hope this is what you are looking for

In the css add

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

When you activate the image to be displayed, you add a class .s--active when you have it that does not show the description

I hope you help greetings

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>