размытые карточки под текстом над изображением

This commit is contained in:
Blue 2019-08-22 16:37:58 +03:00
parent 804aa25685
commit fea2c31c2c
3 changed files with 215 additions and 14 deletions

View file

@ -413,7 +413,7 @@ h1, h2, h3, h4, h5, h6, figure {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
margin: 0;
padding: 0;
color: black;
color: white;
font-family: "Oxygen", sans-serif;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
@ -1473,4 +1473,69 @@ input[type="text"] {
font-weight: 400;
}
.blurred-card {
width: 100%;
height: 100%;
position: relative;
box-shadow: 2px 2px 9px 2px black;
overflow: hidden;
color: white;
padding: 20px;
}
.blurred-card > .background-faker {
position: absolute;
top: 0;
left: 0;
background: black;
width: 100%;
height: 100%;
}
.blurred-card > .background-faker > div {
width: calc(100vw - 15px);
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
filter: blur(10px);
opacity: 0.6;
max-width: 1060px;
}
.col-md-pull-3 .blurred-card > .background-faker > div {
left: calc(-1 * (15px + 2em));
right: auto;
transform: translate(0, -50%);
}
.col-md-push-3 .blurred-card > .background-faker > div {
right: calc(-1 * (15px + 2em));
left: auto;
transform: translate(0, -50%);
}
@media screen and (max-width: 992px) {
.col-md-push-3 .blurred-card > .background-faker > div,
.col-md-pull-3 .blurred-card > .background-faker > div
{
right: auto;
left: calc(-1 * (15px + 2em));
transform: translate(0, -50%);
}
}
.blurred-card > .card-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 20px;
}
/*# sourceMappingURL=style.css.map */