main {

*{
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
height: 100vh;
background-color: whitesmoke;
align-items: center;
}
.container{
display: flex;
}
.card{
height: 500px;
margin: 50px;
box-shadow: 5px 5px 20px black;
overflow: hidden;
}
img{
height: 450px;
width: 280px;
border-radius: 3px;
transition: .5s;
}
.intro{
height: 115px;
width: 222px;
padding: 6px;
box-sizing: border-box;
position: absolute;
bottom: 240px;
background: rgb(27, 27, 27, .5 );
color: white;
transition: .5s;
bottom: 1px;
}
h1{
margin: 10px;
font-size: 40px;
}
p{
font-size: 20px;
margin: 20px;
visibility: hidden;
opacity: 0;
}
span{
font-weight: bold;
}
.card:hover{
cursor: pointer;
}
.card:hover .intro{
height: 360px;
bottom: 80px;
 background: black;

}
.card:hover p{
opacity: 1;
visibility: visible;

}
.card:hover img{
transform: scale(1.1) rotate(-3deg);
}
}