div.wrap
- for (var x = 0; x < 3; x++)
div.clip-content
div.clip-content__wraper
div.clip-content__img
div.clip-content__detail
h2.clip-content__title headline
View Compiled
$images: (
'1': "https://images.unsplash.com/photo-1562887245-f2d5024f6134?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80",
'2': "https://images.unsplash.com/photo-1533292627361-78042570e3bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80",
'3': "https://images.unsplash.com/photo-1587147334659-edd7f0819a80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80",
);
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
.wrap {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.clip-content {
position: relative;
@for $i from 1 through 3 {
&:nth-child(#{$i}) .clip-content__img {
background-image: url(map-get($images, #{$i}));
background-size: cover;
background-position: center center;
}
}
&__wraper {
width: 100%;
overflow: hidden;
transform: scale(1.4) rotate(10deg);
}
&__img {
height: 700px;
width: 100%;
padding: 5rem;
box-sizing: border-box;
transform: scale(1.4) rotate(-10deg);
}
&__detail {
width: 100%;
padding: 3rem;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
}
&__title {
width: 100%;
margin: 0;
font-size: 7vw;
color: white;
text-align: center;
font-family: 'Courgette', cursive;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.