Immortality
New Coder
Where is the problem? I couldn't figure it out.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 180px;
height: 260px;
}
.box-container {
width: 180px;
height: 260px;
margin-right: 12px;
position: relative;
}
.box-container > .inner-box {
position: absolute;
width: 180px;
height: 260px;
top: 0;
left: 0;
font-family: Robos;
font-weight: 700;
font-size: 25px;
color: #ffd700;
background-color: #111;
opacity: 0;
transition-duration: 0.5s;
text-align: center;
transform: translateY(260px);
padding-top: 60%;
text-decoration: none;
}
span {
padding-bottom: 15px;
}
i {
font-size: 25px;
}
a:link {
color: #ffd700;
}
.box-container:hover .inner-box {
opacity: 0.9;
transform: translateY(0);
}
.qty {
display: block;
margin-top: -263px;
margin-right: 10px;
font-size: 10px;
height: 30px;
background-color: #222;
color: purple;
}
</style>
</head>
<body>
<div class="box-container">
<img
src="image/1.jpg" alt="test"
/>
<span class="qty">WEB-DL</span>
<div class="inner-box">
<span>WEB-DL</span> <br />
<a href="#">7.6 <i class="fab fa-imdb"></i></a>
</div>
</div>
</body>
</html>
