Answer the question
In order to leave comments, you need to log in
K
K
Kuraga_022020-10-29 16:41:00
Kuraga_02, 2020-10-29 16:41:00
How do I replace a div with another one that makes it larger and darkens the background of the entire page?
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 goes to the middle of the page and the background of the page is darkened, 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">Звонки и заявки от покупателей</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">Звонки и заявки от покупателей</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">Звонки и заявки от покупателей</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> 1 answer(s)
@firedragon
V
Vladimir Korotenko, 2020-10-29 @firedragon
Use animation. Animate position and size on click. There are examples on mdn
Similar questions
S
O
A
A
L
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question