Javascript-форум - Увеличение блока при клике

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Увеличение блока при клике (https://javascript.ru/forum/dom-window/61327-uvelichenie-bloka-pri-klike.html)

Увеличение блока при клике

Привет ребята, может кто поможет сделать так, как на этом сайте http://panda.su/section/sushi/ При клике на картинку увеличивается вся карточка товара. Или может есть где подобный пример кода, а то я не шарю в JS и JQ. У меня такой код. Нужно чтобы карточка увеличилась до width = 500px.

<div class="product">                 
  <img class="productImg" src="img1.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>

Серега187,
зарисовка на тему ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">.product.big{
    -webkit-transform:scale(1.4) translateY(60px);
    -moz-transform:scale(1.4) translateY(60px);
    -o-transform:scale(1.4) translateY(60px);
    transform:scale(1.4) translateY(60px);
    z-index:10;
  }

  .product:first-child.big{
    -webkit-transform:scale(1.4) translateY(60px) translateX(40px);
    -moz-transform:scale(1.4) translateY(60px) translateX(40px);
    -o-transform:scale(1.4) translateY(60px) translateX(40px);
    transform:scale(1.4) translateY(60px) translateX(40px);
    z-index:10;
  }

  .product{
    border-radius: 12px;
    margin:6px;
    background-color:#FFFFFF;
    position:relative;
    width:150px;
    height:300px;
    float:left;
    -webkit-transition:all 1.2s ease-in-out;
    -moz-transition:all 1.2s ease-in-out;
    -o-transition:all 1.2s ease-in-out;
    -ms-transition:all 1.2s ease-in-out;
    transition:all 1.2s ease-in-out;
    font-size:15px;
    border:2px solid #8B4513;
    width:200px;
  }

  .product img{
    border-radius: 12px;
    cursor:pointer;
    width:100%;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
      $(".product img").on("click", function() {
      $(".product").not($(this).parent().toggleClass("big")
).removeClass("big");
      })
     $('html').click(function (event) {
          if ($(event.target).closest('.product' ).length) return;
          $(".product").removeClass("big");
      });
   })
  </script>
</head>

<body>
  <div class="product">
  <img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>
  <div class="product">
  <img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>
   <div class="product">
  <img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>
</body>

</html>

рони,
Спасибо большое!

Серега187,
ну ты че) Открывай исходный код страницы смотри как они сделали, скачивая js код. Тут даже думать не надо

Серега187,
не было уменьшения по клику на увеличенном блоке ... исправлено, смотрите пост 2 снова

рони, Мон сделать на css (на img, обернутым в label совместно с чекбоксом до img, (чекбокс:checked+ img{width:500px})

Deff,
точно :yes: