Create list with two elements in one line (50% width/100% height), which on hover gets over another li in that line

Vote count:

0

Problem is that when user hovers one li it makes width of li 100 percent of screen, so li needs absolute positioning to get over another li which is on the same line, but in this list I want 6 or more child, when I add more than 2 li's, it breaks. Help.

It must look like this (Full screen 50% width li's) http://ift.tt/1bCvk1X

 $('.firstchild').hover(function() {
    $('.first').css("z-index", "2");
    $('.first').css("width", "100%");
  }, function() {
    $('.first').css("z-index", "0");
    $('.first').css("width", "50%");
  });

  $('.secondchild').hover(function() {
    $('.second').css("z-index", "2");
    $('.second').css("width", "100%");
  }, function() {
    $('.second').css("z-index", "0");
    $('.second').css("width", "50%");
  });


  $(document).ready(function() {
    function setSettings() {
      windowWidth = $(window).width();
      windowHeight = $(window).height();
      width = (((50 * windowWidth) / 100) * 50) / 100;
      marginleft = ((((50 * windowWidth) / 100) * 50) / 100) / 2;
      margintop = (((50 * windowHeight) / 100) * 50) / 100;

      $('.firstchild').css('width', width);
      $('.firstchild').css('marginLeft', marginleft);
      $('.firstchild').css('marginTop', margintop);
      $('.secondchild').css('width', width);
      $('.secondchild').css('marginRight', marginleft);
      $('.secondchild').css('marginTop', margintop);
    };
    setSettings();

    $(window).resize(function() {
      setSettings();
    });
  });

#reasons {
  width: 100%;
  float: left;
  margin: 0;
  height: auto;
  padding: 0;
  background: #f7f2ee;
}
.slides {
  list-style-type: none;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
}
.slides li {
  height: 100vh;
  width: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  float: left;
  transition: all .4s linear;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.slides li:nth-child(even) {
  z-index: 1;
  background-attachment: cover;
  width: 50%;
  right: 0;
}
.slides li:nth-child(even) summary {
  width: 300px;
  margin-right: 200px;
  color: white;
  text-align: center;
  float: right;
}
.slides li:nth-child(3) {
  margin-top: 50%;
}
.slides li summary {
  color: white;
  float: left;
  text-align: center;
  cursor: default;
}
.slides li summary h2 {
  font-family: 'Proxima Nova Bold';
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 20px;
  margin: 10% 0;
}
.slides li summary p {
  width: 100%;
  font-size: 16px;
  text-align: center;
  font-family: 'Andada';
  font-weight: normal;
  font-style: italic;
  opacity: 0.95;
  padding: 0;
  margin: 0;
}

<script src="http://ift.tt/1oMJErh"></script>
<section id="reasons">
  <div class="slider">

    <ul class="slides">
      <li class="first" style="background-image: url(content/mcdonalds.jpg); background-color:black;">
        <summary class="firstchild">
          <h2>Test 1</h2>
          <p>Test description</p>
        </summary>
      </li>
      <li class="second" style="background-image: url(content/batumi.jpg); background-color:red;">
        <summary class="secondchild">
          <h2>TEST 2</h2>
          <p>Test description</p>
        </summary>
      </li>
    </ul>

    <ul class="slides">
      <li class="first" style="background-image: url(content/mcdonalds.jpg); background-color:black;">
        <summary class="firstchild">
          <h2>Test 3</h2>
          <p>Test description</p>
        </summary>
      </li>
      <li class="second" style="background-image: url(content/batumi.jpg); background-color:red;">
        <summary class="secondchild">
          <h2>TEST 4</h2>
          <p>Test description</p>
        </summary>
      </li>
    </ul>



  </div>
</section>

asked 47 secs ago

shotamickaia

1

Create list with two elements in one line (50% width/100% height), which on hover gets over another li in that line