Develop Reference

Overlap text over an image, and as screen is being decreased, change color of overlapping letters

I'm trying to achieve this effect:
And as the screen is being reduced in size, and more letters of my H1 start to overlap the image, I would like them to change color to white. Eventually, when the screen is small enough, the text can just be inside the container that has a background image.
Here's the code I have so far:
.container {
max-width:1350px;
margin:0 auto;
background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
padding-top:15em;
padding-bottom:15em;
position:relative;
}
.overlay {
background-color: transparent;
background-image: linear-gradient(90deg, #FFFFFF 30%, #F2295B00 0%);
opacity: 1;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
h1 {
font-size:60px;
letter-spacing:9px;
text-transform:uppercase;
}
.custom-cta {
display:block;
max-width:100px;
margin-top:10px;
text-align:center;
background:gold;
padding:20px 40px;
}
<div class="container">
<div class="overlay">
<div class="text-box">
<h1>Complete </br>Remodeli<span style="color:white;">ng</span></h1>
<p style="max-width:300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
</div>

I would solve this by making layers. Consider having 2 layers:
A front layer with black text
A back layer with white text and the image.
Now the trick is getting the texts of both the texts to overlap perfectly. Use CSS Grid to create the layout and place the text and image where you need them. With some creative clipping (overflow: hidden) and layer ordering (z-index) you can control where the black text stops and where the white continues.
This will create an illusion of the color changing based on the screen size.
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
max-width: 1350px;
width: 100vw;
height: 100vh;
}
.layer {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 30vw 70vw;
}
:is(.layer--front, .layer--back) .layer__title {
display: block;
font-weight: 700;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
margin: 0 0 1rem;
}
.layer--front {
z-index: 2;
}
.layer--front .layer__title {
color: black;
}
.layer--back .layer__title {
color: white;
}
.layer__content {
grid-area: 1 / 1;
padding: 6rem 2rem;
z-index: 1;
}
.layer--front .layer__content {
overflow: hidden;
}
.layer__image {
grid-area: 1 / 2;
position: relative;
}
.layer__image img {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
padding: 1rem 1rem 1rem 0;
object-fit: cover;
object-position: left;
}
.custom-cta {
display: block;
margin-top: 10px;
text-align: center;
background: gold;
padding: 10px 20px;
}
<div class="container">
<div class="layer layer--front">
<div class="layer__content">
<h1 class="layer__title">Complete <br>Remodeling</h1>
<p style="max-width: 300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
<div class="layer layer--back">
<div class="layer__content">
<span class="layer__title" aria-hidden="true">Complete <br>Remodeling</span>
</div>
<div class="layer__image">
<img src="https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg" alt="" />
</div>
</div>
</div>
Be sure to watch the example in Full page mode.

Here is an approach using flexbox, three overlapping containers, and backdrop-filter: invert(100%).
Basically, the solution is to create three overlapping containers (using z-index) to put one on top of the other.
The image goes as a background image on the under container. The image is then inverted using backdrop-filter: invert(100%) twice to avoid getting a negative. However, when when the text slides over the top of the image, then it is inverted only once, giving the sliding negative effect that is asked for.
The effect is best seen in a fiddle of the solution below as the vertical bar can be dragged left or right to see the sliding effect.
The yellow button changes to blue on sliding over the image, but I am sure that this is not a critical issue.
:root {
--image-height: 500px;
--image-width: 600px;
--top-offset: 350px;
--sidebar-width: 100px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
h1 {
margin-top: 50px;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
}
p {
max-width: 300px;
}
.text-container {
margin-left: 20px;
}
.container {
display: flex;
align-items: stretch;
height: var(--image-height);
position: relative;
}
.sidebar {
flex: 1 1 var(--sidebar-width);
height: var(--image-height);
}
.image {
flex: 0 0 var(--image-width);
height: var(--image-height);
}
.container-under {
top: calc(0px - var(--top-offset));
z-index: -2;
}
.image-under {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg");
background-size: cover;
}
.container-middle {
top: calc(0px - calc(var(--top-offset) + var(--image-height)));
z-index: -1;
}
.image-middle {
background-color: transparent;
backdrop-filter: invert(100%);
}
.container-over {
top: calc(0px - calc(var(--top-offset) + var(--image-height) * 2));
}
.image-over {
background-color: transparent;
backdrop-filter: invert(100%);
}
.custom-cta {
display: block;
margin-top: 10px;
background: gold;
padding: 10px 20px;
width: 150px;
}
<div class="text-container">
<h1>Complete<br/>Remodeling</h1>
<p>With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
<div class="container container-under">
<div class="sidebar"></div>
<div class="image image-under"></div>
</div>
<div class="container container-middle">
<div class="sidebar"></div>
<div class="image image-middle"></div>
</div>
<div class="container container-over">
<div class="sidebar"></div>
<div class="image image-over"></div>
</div>

How can I overlap two images, rotate the top one displaying only one part of it?

I am trying to rotate a card, on hover, the effect I want to achieve is that the image background of the card which is the same as the entire page background sort of comes out and rotate with the card.
Just like in this video https://www.youtube.com/watch?v=IM7YWJ0U6Vs&t=314s
I have tried using the image background twice, but I can find a way to hide the rest of the background image.
This is what I have tried, in the snippet to be more exact what I am trying to do is make the leaves rotate on hover along with the card.
*{
margin: 0;
padding: 0;
}
.container {
background-image: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.inner {
background-image: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80;);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 50px 80px;
}
.card-wrap {
width: 240px;
height: 280px;
position: relative;
margin: 3vw;
padding: 10px;
list-style: none;
}
.card-wrap:hover {
box-shadow: rgba(0, 0, 0, 0.72) 0 0 32px 5px;
transform: rotate(12deg);
transition: all 0.5s ease;
}
<div class="container">
<ul class="inner" id="inner">
<li class="card-wrap" id="card-wrap">
<span class="card">
<img
class="icon"
src="https://img.icons8.com/ios/50/000000/soil.png"
/>
<h1 class="title">Title</h1>
<p>
Pasture he invited mr company shyness. But when shot real her.
</p>
</span>
</li>
</ul>
</div>

One idea is to hide the non needed part using a big shadow:
* {
box-sizing:border-box;
margin:0;
padding:0;
}
.container {
background-image: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80);
background-position: center;
background-size: cover;
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 50px 80px;
}
.card-wrap {
width: 240px;
height: 280px;
position: relative;
margin: 3vw;
padding: 10px;
list-style: none;
box-shadow:
rgba(0, 0, 0, 0) 0 0 32px 5px,
0 0 0 calc(100vh + 100vw) #fff;
transition: all 0.5s ease;
}
.card-wrap:hover {
box-shadow:
rgba(0, 0, 0, 0.72) 0 0 32px 5px,
0 0 0 calc(100vh + 100vw) #fff;
transform: rotate(12deg);
}
<div class="container">
<ul class="inner" id="inner">
<li class="card-wrap" id="card-wrap">
<span class="card">
<img
class="icon"
src="https://img.icons8.com/ios/50/000000/soil.png"
/>
<h1 class="title">Title</h1>
<p>
Pasture he invited mr company shyness. But when shot real her.
</p>
</span>
</li>
</ul>
</div>

I'm trying to make parallax effect on scroll but for the items to move the opposite way

I'm trying to have a students section coming down when scrolling down from underneath my header which has a video as a banner as well, so I need that section to scroll down from underneath that video using parallax on scroll effect.
This is what I've tried already but it just moves up when I scroll down like other parallax effects :
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
$('.section__students').css({
'transform': 'translateY(-' + wScroll / 9 + '%)'
});
});
.students-main {
width: 100%;
height: auto;
text-align: center;
}
.carousel {
position: relative;
margin: 0 auto;
}
.carousel__button {
position: absolute;
top: 45%;
transform: translateY(-45%);
background: transparent;
border: 0;
}
.carousel__button:focus {
outline: 0;
}
.carousel__button--left {
left: 3.5rem;
z-index: 1;
}
.carousel__button--right {
right: 3.5rem;
}
.arrow-left-students {
font-size: 3rem;
}
.arrow-left-students:hover {
color: $color-primary;
}
.arrow-right-students {
font-size: 3rem;
}
.arrow-right-students:hover {
color: $color-primary;
}
.carousel__nav {
display: flex;
justify-content: center;
padding: 3rem 0;
}
.carousel__indicator {
border: 0;
border-radius: 50%;
width: 1.6rem;
height: 1.6rem;
background: $color-gray-dark-2;
margin: 0 1.2rem;
}
.carousel__indicator:focus {
outline: 0;
}
section .students-h1 {
text-align: center;
text-transform: uppercase;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -140px);
}
.students-h1::after {
content: '';
width: 10rem;
height: .8rem;
background-color: $color-primary-light;
position: absolute;
bottom: -24rem;
top: 70%;
left: 50%;
transform: translate(-50%, 30px);
border-radius: 2rem;
}
.wrap-students {
display: inline-block;
justify-content: center;
align-items: center;
margin: 0 3rem;
flex-direction: column;
height: 30rem;
width: 30rem;
background-color: $color-grey-light-1;
border-radius: 3rem;
}
.wrap-students:hover {
box-shadow: -1px 3px 20px 3px $color-primary-light;
transform: translateY(-10%);
transition: all .5s;
}
.students {
padding: 2.5rem 6rem;
}
.students .students-name {
color: $color-gray-dark-2;
padding-top: 1rem;
}
.students .students-description {
margin-top: .5rem;
font-style: italic;
font-family: "lato", sans-serif;
font-size: 1.6rem;
}
.wrap-students .students .students-img {
border-radius: 50%;
width: 16rem;
height: 16rem;
object-fit: cover;
object-position: 50% 10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="rellax section__students students-main" data-rellax-speed="7">
<div class="carousel">
<button class="carousel__button carousel__button--left">
<i class="fas fa-chevron-left arrow-left-students"></i>
</button>
<h1 class="students-h1">Students</h1>
<div class="wrap-students">
<div class="students" data-rellax-speed="8">
<img class="students-img" src="/img/student1.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">lorem ipsum</p>
</div>
</div>
<div class="wrap-students">
<div class="students">
<img class="students-img" src="/img/student3.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">lorem ipsum</p>
</div>
</div>
<div class="wrap-students">
<div class="students" data-rellax-speed="8">
<img class="students-img" src="/img/student1.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">lorem ipsum</p>
</div>
</div>
<div class="wrap-students">
<div class="students">
<img class="students-img" src="/img/student3.jpg" alt="student-image">
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">lorem ipsum</p>
</div>
</div>
<button class="carousel__button carousel__button--right">
<i class="fas fa-chevron-right arrow-right-students"></i>
</button>
<div class="carousel__nav">
<button class="carousel__indicator"></button>
<button class="carousel__indicator"></button>
<button class="carousel__indicator"></button>
</div>
</div>
</section>

if you set a negative number to the Y axis, it will go up. Try removing the - in
$('.section__students').css({
'transform': 'translateY(' + wScroll / 9 + '%)'
});
Or setting a greater value than the actual. I see that students have -50%, try setting only greater values e.g. -30% else it will keep going up.

firstly at Parallex, you don't need javascript to do it, so you can eliminate the script tag
from your comment, I think you need to make the parallax at each image in the 4 cards so you can add the following code
<style>
.parallax {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
width: 16rem;
height: 16rem;
object-fit: cover;
object-position: 50% 10%;
}
.parallax1{
/* The image used */
background-image: url("img/img4.png"); // you can add your image here this is an example
}
</style>
at HTML
<h1 class="students-h1">Students</h1>
<div class="wrap-students">
<div class="students" data-rellax-speed="8">
<div class="parallax1 parallax"></div> // this div is instead of the img tag
<h2 class="students-name">Nick Harrison</h2>
<p class="students-description">lorem ipsum</p>
</div>
</div>

how to make an image fit inside the board [duplicate]

This question already has answers here:
How to make background image fit correctly inside a board without losing responsiveness
(3 answers)
Closed 4 years ago.
I have code in which there is class box, i have given backgroundimage to class box box1.
My problem is that the image is not correctly fitting inside to the board. When i resize the window it is moving upwards. How to
correct it?
How to make the image fit correctly inside the board without losing responsiveness without extract the board element from the main background and use it as an element alone?
which is the method to do this, when i try to make it fit inside the board it is not only fitting inside the box, but also losing its responsiveness..
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>

Add position: relative; to #container and to .container2 (parent) if you set position:absolute to child
See fiddle
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
position: relative;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30vw;
position: relative;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>

position a relative div in front of a absolute div with z-index

I've got a div background-img, on top of that a gradient layer (don't wonder about the animation css, this is just a part of my website, but thats not causing any problems i think) . Now i want to have on top of everything my little navbar. Sadly it seems to not work and i can't figure out how to go.. there's always either the pic-background or the gradient on top of it, z-index gets completely ignored on a tag.
HTML:
.welcome-area{
position:relative;
margin: 0;
width: 100%;
height: 700px;
text-align: center;
overflow:hidden;
position: relative;
z-index: 45;
}
.pic_background{
top: 0;
left: 0;
position:absolute;
z-index: 1;
width: 100%;
height: 700px;
background-color: grey;
background-size: cover;
background-position: 0 -150px;
background-repeat: no-repeat;
}
.main-header{
display: block;
text-align: center;
width: 100%;
height: 100px;
color: white;
background-color: transparent;
position:absolute;
z-index: 7;
}
.gradient_background{
width: 100%;
height: 700px;
top: 0;
background-image: linear-gradient(to bottom right, #002c72 , #0058e6);
animation-name: gradient-background;
animation-duration: 4s;
animation-fill-mode: both;
position: absolute;
z-index: 2;
}
.main-header a{
}
<div class="welcome-area">
<div class=" pic_background">
<header>
<div class="main-header">
<nav>
about me
</nav>
</div>
</header>
</div>
</div>
<div class="gradient_background"></div>
https://jsfiddle.net/ft6y3guq/17/