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

JohnHolliday
February 13, 2023
225 views
0 votes
2 Answers

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>

Answers

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers