style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body{
    min-height: 100vh;/*provides flexibility, ensuring that the body element always covers the full viewport height but can grow if needed*/
    background-color: #55caad;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: space-around;
}
.container .card {
    position: relative;
}
.container .card .face {
    width: 300px;
    height: 200px;
    transition: 1s;/*זמן התזוזה*/
}
.container .card .face.face1 /*רושמים בלי רווח כדי לבקש שהקלאס יכיל את שתי השמות ולא אואו*/{
position: relative;
background: #cf6e6e;
transform: translateY(100px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.container .card .face.face1 .content{
    opacity: 0.2;
    transition: 0.5s /*משמש ליצירת מעברים חלקים בין שני מצבים של אלמנט. הוא מגדיר בין היתר את משך ותפקוד ההקלה של המעבר*/
}
.container .card:hover .face.face1 .content{
    opacity:1; /*עושה אירפוך בצבע המסך עם קצת אפור*/
}
.container .card .face.face1 img {
    max-width: 100px;
}
.container .card .face.face1 h3 {
margin: 10px 0px 0px;
padding: 0;
color: aliceblue;
text-align: center;
font-size: 1.5em;
}
.container .card:hover .face.face1{
    background-color: red;
    transform: translateY(0);/*משמש להזזת אלמנט לאורך ציר ה-Y translateY(10px)יזיז את הרכיב למטה ב-10 פיקסלים, בעוד translateY(-10px)שיעביר אותו למעלה ב-10 פיקסלים*/
}
.container .card .face.face2{
    position: relative;
    background-color: aliceblue;
    transform: translateY(-100px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px black;
}
.container .card:hover .face.face2 {
    transform: translateY(0);
}
.container .card .face.face2 .content p {
    margin: 0;
    padding: 0;
}    
.container .card .face.face2 .content a {
    margin: 15px 0 0 ;
    display: inline-block;
    text-decoration: none;
    font-weight: 900;
    color: blanchedalmond;
    padding: 5px;
    border: 1px solid red;
}
.container .card .face.face2 .content a:hover{
    background-color: aqua;
    color: blueviolet;
}