The image currently in use:
https://i.stack.imgur.com/piK6l.jpg
Here is how I've implemented it using Vue.js, Bootstrap, and CSS:
Code Snippet
<div class="landing">
<div class="container text-white details h-100">
<div class="row h-100">
<div class="col-12 col-md-7 my-auto">
<h1 class="text-left mb-0 font-weight-900 font-48">
About the Alien Zoo experience
</h1>
<p class="text-left mb-0 font-16">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum
</p>
<CustomButton
class="d-block"
buttonText="Next"
@click.native="onButtonClick()"
></CustomButton>
</div>
</div>
</div>
<div class="row hero-image">
<img class="background" src="../assets/images/Alien.png" alt="" />
</div>
</div>
SCSS Styling
.landing {
position: relative;
height: 100vh; // background-color: #151515;
overflow-x: hidden;
.hero-image {
position: relative;
left: 28%;
width: 100%;
size: cover;
}
.hero-image:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 30vh;
height: 100vh;
background: linear-gradient( 93deg, rgba(21, 21, 21, 1) 10%, rgba(0, 0, 0, 0) 50%);
/* W3C */
}
p {
padding-top: 32px;
padding-bottom: 32px;
}
.details {
position: absolute;
z-index: 2;
padding-left: 12%;
}
.background {
display: block;
height: 100vh;
width: 100vw;
}
}
.mobile-alien {
display: none;
}
@media only screen and (max-width: 768px) {
.landing {
display: none;
}
.mobile-alien {
display: block;
}
}
@media only screen and (min-width: 1900px) {
.landing .details {
right: 50%;
}
}
I have utilized a creative workaround by incorporating a gradient overlay on a regular image tag for the desired effect. However, I believe leveraging radial gradients might be more suitable to achieve the fading black corners effect present in the image I'm working with. My attempts at radial gradients haven't yielded satisfactory results yet. With the current CSS approach, I've managed decent outcomes but not quite hitting the mark.
The page's background color is #151515, and I am aiming to create a gradient that fades towards the left side of the image.
If you have any insights or suggestions on improving this implementation, I would greatly appreciate your input. Thank you!