LibreHacker/switching
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

67
sass/style.scss
View file

@ -492,7 +492,7 @@ h1, h2, h3, h4, h5, h6, figure {
h1, h2 {
margin: 0;
padding: 0;
color: rgba(0,0,0,1);
color: white;
font-family: $font-primary;
}
h1 {
@ -1479,4 +1479,69 @@ input[type="text"] {
}
}
}
}
.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;
}