How can I replace a div with another one, making it larger and darkening the background of the entire page?

  • 0
    Please help me solve a huge problem ((you need to replace the block when you click on another one so that it becomes larger and at the same time moves to the middle of the page and the background of the page darkens, while there is such an option, but this is half what you need

    <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
    <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{
        position:relative;
        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;
      }
      </style>
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
      <script>
       $(function(){
          $(".productcard-body").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="container-fluid gray">
                            <div class="row">
                                <div class="arrow_header col-11 marg_no_arrow">
                                    <div class="row justify-content-center">
                                       <div class="col-xl-4 col-lg-4 col-md-10 col-sm-12 col-12 d-flex justify-content-center card_first_divider_b">
                                            <div class="card shadow product" style="max-width: 390px;">
                                                <img class="card-img-top" src="img/platina.png" alt="Платина">
                                                <div class="card-body productcard-body">
                                                    <p class="card-text">Звонки и заявки от&nbsp;покупателей</p>
                                                    <p class="card-text">Полнофункциональный интернет-магазин</p>
                                                    <p class="card-text">Загрузка до %х% товаров</p>
                                                    <p class="card-text">Место в каталогах выше Золотых компаний</p>
                                                    <p class="card-text c_t_last">Персональный контент-менеджер</p>
                                                    <span href="#" class="btn btn_first btn-orange"><img src="" alt="">УЗНАТЬ БОЛЬШЕ</span>
                                                </div>
                                            </div>
                                       </div>
    
                                       <div class="col-xl-4 col-lg-4 col-md-10 col-sm-12 col-12 d-flex justify-content-center card_first_divider_b">
                                            <div class="card shadow product" style="max-width: 390px;">
                                                <img class="card-img-top" src="img/gold.png" alt="Платина">
                                                <div class="card-body productcard-body">
                                                    <p class="card-text">Звонки и заявки от&nbsp;покупателей</p>
                                                    <p class="card-text">Полнофункциональный интернет-магазин</p>
                                                    <p class="card-text">Загрузка до %х% товаров</p>
                                                    <p class="card-text">Место в каталогах выше Золотых компаний</p>
                                                    <p class="card-text c_t_last">Персональный контент-менеджер</p>
                                                    <span href="#" class="btn btn_first btn-orange">УЗНАТЬ БОЛЬШЕ</span>
                                                </div>
                                            </div>
                                       </div>
                                       <div class="col-xl-4 col-lg-4 col-md-10 col-sm-12 col-12 d-flex justify-content-center card_first_divider_b">
                                            <div class="card shadow product" style="max-width: 390px;">
                                                <img class="card-img-top" src="img/aurum.png" alt="Платина">
                                                <div class="card-body productcard-body">
                                                    <p class="card-text">Звонки и заявки от&nbsp;покупателей</p>
                                                    <p class="card-text">Полнофункциональный интернет-магазин</p>
                                                    <p class="card-text">Загрузка до %х% товаров</p>
                                                    <p class="card-text">Место в каталогах выше Золотых компаний</p>
                                                    <p class="card-text c_t_last">Персональный контент-менеджер</p>
                                                    <span href="#" class="btn btn_first btn-orange a_first_card">УЗНАТЬ БОЛЬШЕ</span>
                                                </div>
                                            </div>
                                       </div>
                                    </div>
                                </div>
                            </div>
                        </div>
    
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    </body>
    JavaScript Anonymous, Feb 11, 2020

  • 1 Answers
  • 0
    Use animation. Animate the position and size on click. There are examples on mdn
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!