.movie-card { overflow: hidden; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; @media (hover) { &:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } &:hover .movie-card__thumb .icon { opacity: 1; visibility: visible; } } } .movie-card__thumb { position: relative; } .movie-card__thumb img { width: 100%; // height: 420px; aspect-ratio: 2/3; object-fit: cover; -o-object-fit: cover; object-position: center; -o-object-position: center; } .movie-card__thumb .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: $primary; font-size: 24px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; @media not (hover) { opacity: 1; visibility: visible; background-color: rgba(0, 0, 0, 0.2); } } .movie-card__content { padding: 20px; background-color: #1b1b3f; } .movie-card__title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; } @media (max-width: 425px) { .movie-card .movie-card__content { display: none; } } .movie-card__content .year { font-size: 14px; } .movie-card__meta { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin-top: 5px; } .movie-card__meta li i { font-size: 12px; } .movie-card__meta li span { font-size: 12px; padding-left: 4px; }