что мне не хватает, это выглядит маленьким на моей веб-странице, я хочу, чтобы это было на всем моем экране. Я не могу найти, в чем я ошибаюсь. Я хочу, чтобы он соответствовал всем размерам ПК, телевизора, 4K, экрана ноутбука. это выглядит примерно так
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 1000px;
height: 500px;
display: flex;
}
.container .box{
position: relative;
width: 250px;
height: 500px;
background: #ccc;
transition: 0.5s;
}
.container .box:hover{
transform: scale(1.1);
z-index: 1;
box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
position: absolute;
width: 100%;
height: 250px;
overflow: hidden;
}
.container .box:nth-child(odd) .thumb {
bottom: 0;
left: 0;
}
.container .box .thumb img{
width: 100%;
}
.container .box .details{
position: absolute;
width: 100%;
height: 250px;
overflow: hidden;
background: #262626;
}
.container .box:nth-child(even) .details {
bottom: 0;
left: 0;
}
.container .box:nth-child(1) .details {
background: #65214a;
}
.container .box:nth-child(2) .details {
background: #fd3f41;
}
.container .box:nth-child(3) .details {
background: #ffb539;
}
.container .box .details .content{
position: absolute;
top: calc(50% + 16px);
transform: translateY(-50%);
width: 100%;
padding: 20px;
box-sizing: border-box;
text-align: center;
transition: 0.5s;
}
.container .box:hover .details .content{
top: calc(50%);
}
.container .box .details .content h3{
margin: 0;
padding: 0;
padding: 10px 0;
color: #fff;
}
.container .box .details .content a{
display: inline-block;
padding: 5px 20px;
color: #fff;
border: 2px solid #fff;
text-decoration: none;
transition: 0.5s;
border-radius: 20px;
transform: scale(0);
}
.container .box:hover .details .content a{
transform: scale(1);
}
.container .box .details .content a:hover{
background: #fff;
color: #262626;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="activity.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="thumb">
<img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
</div>
<div class="details">
<div class="content">
<i class="fa fa-gift" aria-hidden="true"></i>
<img src="/images/facebook.png" alt="">
<h3>Desert Safari</h3>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="box">
<div class="thumb">
<img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
</div>
<div class="details">
<div class="content">
<i class="fa fa-gift" aria-hidden="true"></i>
<img src="/images/facebook.png" alt="">
<h3>Desert Safari</h3>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="box">
<div class="thumb">
<img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
</div>
<div class="details">
<div class="content">
<i class="fa fa-gift" aria-hidden="true"></i>
<img src="/images/facebook.png" alt="">
<h3>Desert Safari</h3>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>