how to make 12 block in two rows responsive while it has hover effect

Question

I want to implement two rows and each row has a list of 6 blocks with exact effect which there is in this website http://www.101holidays.co.uk/ I implement somthing like this

but the problem is that its like a mess in making it responsive. I did too much javasript code to make it responsive but still it's not working well in diffrent sizes.

var winwidth = $(window).width();
if (winwidth < 530) {
  $("#Message").css("width", 280);
}
if (winwidth < 400) {
  $("#Message").css("width", 200);
}
var x = ($("#twelvetour li").width()) + 55;
var y = 0;
if (x > 255) {
  x = x + 10;
  y = x + 180;
} else if (x < 255) {
  var z = x;
  y = x + 200;
}
$(".twelveeffect").height(x);
$("#twelvetour li").height(x);
$("#twelvetour li>div.twelveeffect").hover(
  // Mouse Over
  function() {
    $(this).parent().css("zIndex", 9);
    $(this).find("div.moretourdetail").css("display", "block");
    $(this).animate({
      width: '110%',
      height: y
    }, 100);
  },
  // Mouse Out
  function() {
    $(this).animate({
      width: '100%',
      height: z
    }, 100, function() {
      $(this).find("div.moretourdetail").css("display", "none");
      $(this).parent().css("zIndex", 8);
    });
  });

#twelvetour .container {
  max-width: 1302px !important;
  border-top: 1px solid rgba(128, 128, 128, 0.11);
  border-bottom: 1px ridge rgba(128, 128, 128, 0.11);
  padding-top: 50px;
  padding-bottom: 100px;
}

.moretourdetail {
  position: relative;
  display: none;
  height: 0;
}

#twelvetour li {
  background-color: green;
  height: 255px;
  padding: 0;
  width: 15.5%;
  z-index: 8;
  margin: 5px;
}

.twelveeffect {
  background-color: #fff;
  padding: 0;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  overflow: hidden;
  height: 250px;
}

#twelvetour nav:first-child ul {
  z-index: 999;
}

#twelvetour nav:last-child ul {
  z-index: 22;
}

#twelvetour li h3 {
  font-size: 15px;
  color: #000;
  padding-top: 10px;
}

#twelvetour li p {
  width: 100%;
  padding-top: 10px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  color: #777;
  font-size: 13px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twelvetour" class="row text-center eachbox">
  <div class="container ">
    <div>
      <nav class="">
        <ul class="">
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img id="imgheight" class="img-responsive" src="#" alt="" />
              <h3 class="text-center twelveindexfont">
                some text
                <br />
              </h3>
              <div class="moretourdetail">
                <p>lorem ipsum .....</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">Some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum.....</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum....</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">sometxt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">som txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">som txt</h3>
              <div class="moretourdetail">
                <p> lorem ipsum...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
        </ul>
      </nav>
      <nav class="">
        <ul class="row">
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p> lorem ipsum... </p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">som txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="#" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum</p>
                <a href="">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsume...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="#" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsume...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p class="">lorem ipsume...</p>
                <a href="">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>

Answer 1

Why don't you try css transition.

$('.twelveeffect').hover(function(){
  $(this).toggleClass('active');
})

#twelvetour .container {
  max-width: 1302px !important;
  border-top: 1px solid rgba(128, 128, 128, 0.11);
  border-bottom: 1px ridge rgba(128, 128, 128, 0.11);
  padding-top: 50px;
  padding-bottom: 100px;
}

#twelvetour li {
  height:100px;
  padding: 0;
  margin: 5px;
  position:relative;
  list-style:none;
}

.twelveeffect {
  position:absolute;
  background-color: #fff;
  padding: 0;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  overflow: hidden;
  height:100px;
  transition:all .3s;
}
.twelveeffect:hover{
  transform:scale(1.2);
  height:350px;
}
.twelveeffect.active{
  z-index:11;
}
#twelvetour nav:first-child ul {
  z-index: 999;
}

#twelvetour nav:last-child ul {
  z-index: 22;
}

#twelvetour li h3 {
  font-size: 15px;
  color: #000;
  padding-top: 10px;
}

#twelvetour li p {
  width: 100%;
  padding-top: 10px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  color: #777;
  font-size: 13px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twelvetour" class="row text-center eachbox">
  <div class="container ">
    <div>
      <nav class="">
        <ul class="">
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img id="imgheight" class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">
                some text
                <br />
              </h3>
              <div class="moretourdetail">
                <p>lorem ipsum .....</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">Some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum.....</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum....</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">sometxt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">som txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">som txt</h3>
              <div class="moretourdetail">
                <p> lorem ipsum...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
        </ul>
      </nav>
      <nav class="">
        <ul class="row">
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p> lorem ipsum... </p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">som txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsum</p>
                <a href="">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsume...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p>lorem ipsume...</p>
                <a href="#">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
          <li class="col-md-2 col-sm-4 col-xs-6">
            <div class="twelveeffect">
              <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="" />
              <h3 class="text-center twelveindexfont">some txt</h3>
              <div class="moretourdetail">
                <p class="">lorem ipsume...</p>
                <a href="">
                  <input class="btn btn-primary" type="button" value="READ MORE..." />
                </a>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>