JSFiddle - React, Tailwind, and code Playground

by Lal Prakash

HTML

<div class="hover">
    <div class="image">
        <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
    </div>
    <div class="text">
        <p>Lorem ipsum dolor sit amet, nulla diam nascetur augue, recusandae sollicitudin tincidunt vivamus, venenatis nunc orci in feugiat a. Sed risus consequat pulvinar ac mus, vitae nunc at ultrices suscipit, enim non risus feugiat ante sed turpis, diam magna augue. Wisi eu arcu, consequat neque phasellus et elit et cras, et natoque. Lorem et duis fringilla elit sapien. Curae libero enim placerat, per ut, ante fringilla at nunc, nec quibusdam, integer velit vestibulum ut mauris sed. Vel integer sed vestibulum. Vitae justo vitae vehicula et vel, integer mus in, vivamus sapien malesuada, id ante fringilla vivamus dolor non. Lectus ut viverra nunc, nec nec scelerisque ac faucibus, luctus eu risus aliquet lectus, vitae cursus ac etiam, justo consequat. Sapien architecto donec venenatis euismod, nonummy nibh elit eros sed parturient, mauris ut ac id dui quam phasellus, ornare vestibulum pellentesque risus. Duis nunc elit dolor pede maecenas labore, per commodo, taciti integer nulla semper, blandit vestibulum. Accumsan velit, sed eu suspendisse, at netus, aenean parturient, varius faucibus dignissim vulputate.</p>
    </div>
</div>
<div class="hover">
    <div class="image">
        <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
    </div>
    <div class="text">
        <p>Lorem ipsum dolor sit amet, nulla diam nascetur augue, recusandae sollicitudin tincidunt vivamus, venenatis nunc orci in feugiat a. Sed risus consequat pulvinar ac mus, vitae nunc at ultrices suscipit, enim non risus feugiat ante sed turpis, diam magna augue. Wisi eu arcu, consequat neque phasellus et elit et cras, et natoque. Lorem et duis fringilla elit sapien. Curae libero enim placerat, per ut, ante fringilla at nunc, nec quibusdam, integer velit vestibulum ut mauris sed. Vel...

CSS

.hover {
    width:auto;
    height:300px;
    overflow:hidden;
    display: inline-block;
    margin: 12.5px;
}
.image {
    display:inline-block;
    width:auto;
    float:left;
}
.hover img {
    width:300px;
    height:300px;
}
.text {
    width: 0px;
    text-align: center;
    display:inline-block;
    background-color:blue;
    overflow:hidden;
}

JavaScript

var divs = document.getElementsByClassName('image');
  var whattochange = document.getElementsByClassName('text');
  for (var i = 0; i < divs.length; i++) {

      divs[i].addEventListener("click", function () {
          for (var i = 0; i < whattochange.length; i++) {
      whattochange[i].style.width = '800px';
      whattochange[i].style.transition = 'all 1s';
      whattochange[i].style.backgroundColor = 'red';
    }
      }, false);
  }