យើងរចនារូបភាពជាប្រអប់សម្រាប់ដាក់នៅខាងក្រោម slide ហើយ slider ហើយដែលវាមានរូបភាពជាច្រើន
HTML
<body>
<div class="container-fluid navi">..
</div>
<div class="navbar-menu">..
</div>
<div class="container">..
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xl-3 item-box">
<div class="box">
<img src="../../img/dog3.jpeg" alt="">
<h1>Dog 3</h1>
</div>
</div>
<div class="col-xl-3 item-box">
<div class="box">
<img src="../../img/dog1.webp" alt="">
<h1>Dog 1</h1>
</div>
</div>
<div class="col-xl-3 item-box">
<div class="box">
<img src="../../img/cat2.jpeg" alt="">
<h1>Cat 2</h1>
</div>
</div>
<div class="col-xl-3 item-box">
<div class="box">
<img src="../../img/dog6.jpeg" alt="">
<h1>Dog 6</h1>
</div>
</div>
</div>
</div>
</body>
CSS
.slide-bar .box .pagenetion ul li{
float: left;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.627);
color: white;
justify-content: center;
align-items: center;
font-size: 10px;
margin: 3px;
display: flex;
cursor: pointer;
}
/*MARK: Image box */
.item-box{
/*background-color: beige;*/
height: 250px;
margin-top: 10px;
/* col-xl-3 វាគឹមាន padding default របស់គឺ ១០*/
padding: 0 5px;
}
.item-box .box{
height: 100%;
width: 100%;
background-color: gainsboro;
position: relative;
overflow: hidden; /* បិទរូបកុំលានចេញពីប្រអប់ពេល scall*/
}
.item-box .box img{
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.3s;
}
.item-box .box img:hover{
transform: scale(1.1);
}
.item-box .box h1{
position: absolute;
top: 60%;
left: 50%;
background-color: rgba(153, 205, 50, 0.632);
color: white;
font-size: 18px;
padding: 8px;
transform: translateX(-50%)
}
0 Comments