.card {
display: flex;
width: 650px;
height: 300px;
overflow: hidden;
cursor: pointer;
position: relative;
color: rgb(0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(88, 48, 1, 0.445)), url('img/singpos.JPG');
}
.second-card{
margin-top: 40px;
width: 600px;
height: 300px;
overflow: hidden;
cursor: pointer;
color: rgb(0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: linear-gradient(rgba(0, 0, 0, 0.295), rgba(88, 48, 1, 0.445)), url('img/withtext.jpg');
margin-bottom: 20px;
}
.h2 {
color: #ffffff;
line-height: 0.9;
position: absolute;
inset: auto auto 80px 30px;
margin: 0;
transition: inset .3s .3s ease-out;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
text-transform: uppercase;
text-align: center;
margin-left: 20px
}
.p{
position: absolute;
margin-inline: 3%;
opacity: 0;
max-width: 80%;
transition: opacity .3s ease-out;
}
.p {
inset: auto auto 80px 30px;
color: #ffffff;
line-height: 0.9;
}
:hover h2 {
inset: auto auto 220px 30px;
transition: inset .3s ease-out;
}
:hover p{
opacity: 1;
transition: opacity .5s .1s ease-in;
}
.card:hover {
transition: opacity .3s ease-in;
opacity: 1;
}
.material-symbols-outlined {
vertical-align: middle;
}