<!-- Thanks for checking out this PEN.
If you have any question, please feel free to contact me via email(immad.hamid@gmail.com) 
For more pen visit codepen.io/immad-hamid  -->
<div class="container">
 <div class="row">
   <div class="accord-wrapper">
 
     <div class="div1">
       <div class="accord-content">
         <h2><span>WORKING</span> TO END POVERTY</h2>
         <div class="smoky">
           <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
         </div>
       </div>
     </div>

     <div class="div2">
       <div class="accord-content">
         <h2><span>REFORMING</span> EDUCATION FOR ALL STUDENTS</h2>
         <div class="smoky">
           <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
         </div>
       </div>
     </div>

     <div class="div3">
       <div class="accord-content">
         <h2><span>FIGHTING</span> FOR SOCIAL JUSTICE</h2>
         <div class="smoky">
           <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
         </div>
       </div>
     </div>

   </div>
 </div>
</div>

/* Thanks for checking out this PEN.
If you have any question, please feel free to contact me via email(immad.hamid@gmail.com) 
For more pen visit codepen.io/immad-hamid  */
.div1, .div2, .div3 {
  width: 33.333%;
}

.widthlow{
  width: 12%;
}

.widthmax{
  width: 76%;
  transition: width 1s;
}

.widthlow h2, .widthmax h2 {
  opacity: 0;
}

.widthmax:hover .smoky {
  opacity: 1;
  -webkit-transition-property: opacity; /* Safari */
  -webkit-transition-duration: 0.5s; /* Safari */
  -webkit-transition-delay: 0.5s; /* Safari */
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}

.accord-wrapper {
  background-image: url(https://www.shutterstock.com/image-illustration/abstract-blue-red-smoke-steam-600w-1468643051.jpg);
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  height: 400px;
}

.accord-wrapper > div {
  float: left;
  transition: width 0.5s ease-in-out;
  -moz-transform: skew(-20deg, 0);
  -ms-transform: skew(-20deg, 0);
  -webkit-transform: skew(-20deg, 0);
  transform: skew(-20deg, 0);
  -moz-transform: skew(-20deg, 0deg);
  -ms-transform: skew(-20deg, 0deg);
  -webkit-transform: skew(-20deg, 0deg);
  padding-right: 1%;
  background-color: transparent;

}

.accord-content {
  color: #fff;
  padding: 35px;
  height: 400px;
  display: flex;
  align-items: center;
  text-align: center;
}

.accord-content h2 {
  color: #66a5ff;
  font-style: normal;
  -moz-transform: skew(20deg, 0);
  -ms-transform: skew(20deg, 0);
  -webkit-transform: skew(20deg, 0);
  transform: skew(20deg, 0);
  -moz-transform: skew(20deg, 0deg);
  -ms-transform: skew(20deg, 0deg);
  -webkit-transform: skew(20deg, 0deg);
  max-width: 232px;
  margin: 0 auto;
  text-align: left;
  font-family: "proxima-nova",sans-serif;
  font-weight: 700;
  font-size:28px;
  -webkit-transition-property: opacity; /* Safari */
  -webkit-transition-duration: 0.2s; /* Safari */
  -webkit-transition-delay: 0.2s; /* Safari */
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-delay: 0.2s;
}

.accord-content h2 span {
  color: #fff;
}

.div1 .accord-content {
  position: relative;
  z-index: 1;
}

.div1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -74px;
  height: 100%;
  width: calc(100% + 60px);
  background-color: rgba(7, 7, 79, 0.6);
}

.div2 .accord-content {
  background: none;
  position: relative;
  z-index: 1;
}

.div2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(7, 7, 79, 0.6);
}

.div3:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -74px;
  height: 100%;
  width: calc(100% + 60px);
  background-color: rgba(7, 7, 79, 0.6);
}

.div3 .accord-content {
  background: none;
  position: relative;
  z-index: 1;
}
.accord-content {
  position: relative;
}

.accord-content .smoky {
        -moz-transform: skew(20deg, 0deg) translateX(-50%);
    -ms-transform: skew(20deg, 0deg) translateX(-50%);
    -webkit-transform: skew(20deg, 0deg) translateX(-50%);
    transform: skew(20deg, 0deg) translateX(-50%);
    -moz-transform: skew(20deg, 0deg) translateX(-50%);
    -ms-transform: skew(20deg, 0deg) translateX(-50%);
    -webkit-transform: skew(20deg, 0deg) translateX(-50%);
    font-family: "proxima-nova",sans-serif;
    font-size: 22px;
    position: absolute;
    left: calc(50% + 60px);
    width: 100%;
    padding-right: 90px;
    opacity: 0;
      }

/* Thanks for checking out this PEN.
If you have any question, please feel free to contact me via email(immad.hamid@gmail.com) 
For more pen visit codepen.io/immad-hamid */

$(".div1").on({
    mouseenter: function() {
        console.log('hello');
        $('.div2, .div3').addClass('widthlow');
        $('.div1').addClass('widthmax');
        $(".widthmax").addClass('opacity');
    },
    mouseleave: function() {
        $('.div2, .div3').removeClass('widthlow');
        $('.div1').removeClass('widthmax');
        $('.div1').removeClass('opacity');
    }
});

$(".div2").on({
    mouseenter: function() {
        console.log('hello');
        $('.div1, .div3').addClass('widthlow');
        $('.div2').addClass('widthmax');
        $('.widthmax').addClass('opacity');
    },
    mouseleave: function() {
        $('.div1, .div3').removeClass('widthlow');
        $('.div2').removeClass('widthmax');
        $('.div2').removeClass('opacity');
    }
});

$(".div3").on({
    mouseenter: function() {
        console.log('hello');
        $('.div1, .div2').addClass('widthlow');
        $('.div3').addClass('widthmax');
        $('.widthmax').addClass('opacity');
    },
    mouseleave: function() {
        $('.div1, .div2').removeClass('widthlow');
        $('.div3').removeClass('widthmax');
        $('.div3').removeClass('opacity');
    }
});