Как сделать наведение на блок товара чтобы не ехала верстка?

343

08 июня 2017, 05:19

Подскажите какие моменты необходимо учитывать при верстке подобных конструкций ? Если делать обычным увеличением высоты при наведении то буду ехать все нижние блоки, а нужно сделать примерно как в примере, чтобы при наведении верстка не ехала. На какие моменты нужно обратить внимание?

Answer 1

Я в общем не стал добавлять кнопки и прочее , сделал текст красный который появится при наведении и бордюр что бы было видно сам элемент

смотреть на полном экране

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  text-align: center; 
} 
 
.post { 
  width: 220px; 
  height: 340px; 
  border: 1px solid red; 
  display: inline-block; 
  background: #fff; 
  overflow: hidden; 
} 
 
.post:hover { 
  height: 450px; 
  position: relative; 
  margin-top: -110px; 
  transform: translate(0, 110px); 
} 
 
.main { 
  width: 670px; 
  margin: 10px auto; 
  padding-bottom: 300px; 
}

<div class="main"> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
  <div class="post"> 
    <p style="font-size:22px; padding-bottom:10px;">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, 
      eget tincidunt nibh pulvinar a. 
    </p> 
    <p style="color:red;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.</p> 
  </div> 
</div>