Как называется функциональность дизайна и как ее спроектировать
https://i.stack.imgur.com/rmGWT.png[^]
я должен был создать веб страницу вот так когда я навожу эту маленькую часть в нижнем углу большая часть должна двигаться как этого добиться я совершенно запутался по крайней мере пожалуйста укажите мне имя как называется эта функциональность
Что я уже пробовал:
я попытался таким образом добиться этой функциональности, то есть поместил 10 верикальных гибких коробок с некоторым случайным содержимым в них, и я не знаю, как достичь желаемой функциональности
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="flexstyles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<div class="d-flex align-items-stretch bg-light" style="height: 500px">
<div class="p-2 border padstyle" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
</form>
</body>
</html>
совершенно запутался как реализовать эту функциональность пожалуйста помогите мне
Заранее спасибо
Gerry Schmitz
Похоже на пару "списков просмотров".