<div class="row itms itemcont">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<div class="movie-card" style="background-image: url(https://files.mtssnetwork.ga/cdn//n/ext-img/nGsNruW3W27V6r4gkyc3iiEGsKR.jpg); box-shadow: -15px -10px 150px -35px rgba(255,0,0.7);">
<div class="movie-card__overlay"></div>
<div class="movie-card__share">
<button class="movie-card__icon">
<i class="fa fa-heart"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-star"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-tv"></i>
</button>
</div>
<div class="movie-card__content">
<div class="movie-card__header">
<h1 class="movie-card__title">Something Item</h1>
<h4 class="movie-card__info">(2019) Sci-Fi, Thriller</h4>
</div>
<p class="movie-card__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, elit in aliquet tincidunt, augue elit fermentum augue. Donec.</p>
<button class="btn btn-outline" type="button">Details</button>
</div>
<div class="blur_back"></div>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<div class="movie-card bxs2" data-movie="IT2">
<div class="movie-card__overlay"></div>
<div class="movie-card__share">
<button class="movie-card__icon">
<i class="fa fa-heart"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-star"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-tv"></i>
</button>
</div>
<div class="movie-card__content">
<div class="movie-card__header">
<h1 class="movie-card__title">Something Item</h1>
<h4 class="movie-card__info">(2019) Sci-Fi, Thriller</h4>
</div>
<p class="movie-card__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, elit in aliquet tincidunt, augue elit fermentum augue. Donec.</p>
<button class="btn btn-outline movie-card__button" type="button">Details</button>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<div class="movie-card bxs3" data-movie="IT3">
<div class="movie-card__overlay"></div>
<div class="movie-card__share">
<button class="movie-card__icon">
<i class="fa fa-heart"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-star"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-tv"></i>
</button>
</div>
<div class="movie-card__content">
<div class="movie-card__header">
<h1 class="movie-card__title">Something Item</h1>
<h4 class="movie-card__info">(2019) Sci-Fi, Thriller</h4>
</div>
<p class="movie-card__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, elit in aliquet tincidunt, augue elit fermentum augue. Donec.</p>
<button class="btn btn-outline movie-card__button" type="button">Details</button>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
<div class="movie-card bxs4" data-movie="IT1">
<div class="movie-card__overlay"></div>
<div class="movie-card__share">
<button class="movie-card__icon">
<i class="fa fa-heart"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-star"></i>
</button>
<button class="movie-card__icon">
<i class="fa fa-tv"></i>
</button>
</div>
<div class="movie-card__content">
<div class="movie-card__header">
<h1 class="movie-card__title">Something Item</h1>
<h4 class="movie-card__info">(2019) Sci-Fi, Thriller</h4>
</div>
<p class="movie-card__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, elit in aliquet tincidunt, augue elit fermentum augue. Donec.</p>
<button class="btn btn-outline movie-card__button" type="button">Details</button>
</div>
</div>
</div>
</div>@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800");
.itemcont{
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
.itms {
font-family: "Montserrat", helvetica, arial, sans-serif;
font-size: 14px;
color: #cfd6e1;
line-height: 1.5;
font-weight: 400;
overflow-x: hidden;
}
button {
font-family: inherit;
border: 0;
cursor: pointer;
}
button:focus {
outline: 0;
}
.movie-card {
background-size: contain;
background-repeat: no-repeat;
width:100%;
max-width: 800px;
height: 100%;
max-height: 300px;
display: block;
margin: 2vh auto;
border-radius: 8px;
position: relative;
@media screen and (max-width: 800px) {
width: 95%;
max-width: 95%;
}
}
@media screen and (max-width: 600px) {
.movie-card {
background-position: 50% 0%;
background-size: cover;
height: 400px;
}
}
.movie-card:hover {
transform: scale(1.02);
transition: all 0.4s;
}
.movie-card[data-movie="IT1"] {
background-image: url(https://files.mtssnetwork.ga/cdn//n/ext-img/nGsNruW3W27V6r4gkyc3iiEGsKR.jpg);
}
.movie-card[data-movie="IT2"] {
background-image: url("http://www.blastr.com/sites/blastr/files/back-to-the-future-part-ii-original.jpg");
}
.movie-card[data-movie="IT3"] {
background-image: url("https://files.mtssnetwork.ga/cdn//n/ext-img/iaNi7V6cD1ljbdcbNmjZayrCzEU.jpg");
}
.movie-card__overlay {
width: 100%;
height: 100%;
border-radius: 8px;
background: linear-gradient(to right, rgba(42, 159, 255, 0.2) 0%, #212120 60%, #212120 100%);
background-blend-mode: multiply;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
@media screen and (max-width: 600px) {
.movie-card__overlay {
background: linear-gradient(to bottom, rgba(42, 159, 255, 0.2) 0%, #212120 60%, #212120 100%);
}
}
.movie-card__share {
padding: 1em;
display: inline-block;
width: 100%;
max-width: 130px;
}
@media screen and (max-width: 600px) {
.movie-card__share {
display: block;
width: 100%;
}
}
.movie-card__icon {
color: #ffffff;
mix-blend-mode: lighten;
opacity: .4;
background: none;
padding: 0;
}
.movie-card__icon:hover {
opacity: 1;
mix-blend-mode: lighten;
}
.movie-card__icon:not(:first-of-type) {
margin-left: 5px;
}
.movie-card__icon i {
font-size: 1.2em;
}
.movie-card__content {
width: 100%;
max-width: 370px;
display: flex;
align-items: flex-start;
flex-direction: column;
position: relative;
float: right;
padding-right: 1em;
padding-bottom: 1em;
}
@media screen and (max-width: 1000px) {
.movie-card__content {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.movie-card__content {
margin-top: 4.2em;
width: 100%;
float: inherit;
max-width: 100%;
padding: 0 1em 1em;
}
}
.movie-card__header {
margin-bottom: 2em;
margin: 5vh auto;
}
.movie-card__title {
color: #ffffff;
margin-bottom: .25em;
opacity: .75;
}
.movie-card__info {
text-transform: uppercase;
letter-spacing: 2px;
font-size: .8em;
color: #2a9fff;
line-height: 1;
margin: 0;
font-weight: 700;
opacity: .5;
}
.movie-card__desc {
font-weight: 300;
opacity: .84;
margin-bottom: 2em;
}
h1, h2, h3 {
font-family: "Montserrat", helvetica, arial, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1;
font-weight: 400;
}
.btn {
padding: .5rem 2rem;
background-color: rgba(255, 255, 255, 0.4);
color: white;
}
.btn-outline {
background-color: transparent;
border: 0.0px solid #ffffff;
}
.btn::before {
font-family: "FontAwesome";
content: "\f05a";
vertical-align: left;
font-size: 1.0em;
padding-right: .6em;
}
.btn-outline:hover {
border-color: #2a9fff;
color: #2a9fff;
box-shadow: 0px 1px 8px 0px rgba(245, 199, 0, 0.2);
}
.blur_back{
position: absolute;
top: 0;
z-index: 1;
height: 100%; right: 0;
background-size: cover;
border-radius: 11px;
}
}
#ave{
box-shadow: 10px 10px 150px -45px rgba(199,147,75, 0.7);
margin-bottom: 250px;
}
#ave:hover{
box-shadow: 0px 0px 120px -55px rgba(199,147,75, 0.7);
}
.bxs1{
box-shadow: -15px -10px 150px -35px rgba(255,0,0.7);
}
.bxs2{
box-shadow: 15px -10px 150px -35px rgba(1,255,0.7);
}
.bxs3{
box-shadow: -15px 10px 150px -35px rgba(1,255,0.7);
}
.bxs4{
box-shadow: 15px 10px 150px -35px rgba(255,0,0.7);
}
External CSS
- https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
External JavaScript
This Pen doesn't use any external JavaScript resources.