Looking for a creative way to make text reveal a background without using the standard clipping technique?

Take a look at the image attached to see the effect I am aiming for.

Essentially, I am trying to make the background image show through the text, except where the text extends beyond the faded panel. In those areas, I need the text to blend in with the panel by having the same color/opacity.

This task is proving to be quite challenging, but I am curious to explore different solutions to achieve my desired outcome.

Thank you, Harry.

https://i.sstatic.net/Pttxm.png

EDIT 1: If you want to experiment with anything, you can check out this codepen https://codepen.io/itsharryfrancis/pen/XVagep

I attempted to use the following code snippet, but it didn't yield the desired result:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

EDIT 2: For anyone who might be interested in the latest version of my work, I have added a codepen link below for reference.

https://codepen.io/itsharryfrancis/pen/goxVQP?editors=0100

htmlcssclipping

Answer №1

Check out this example that demonstrates the desired look, however it utilizes the relatively new clip-path property that is currently not supported in IE and Edge browsers. To work around this issue, you can use SVG clipping as an alternative, but for now, this should suffice.

.example {
    width: 600px;
}

.example {
    background: url('http://dummy-images.com/nature/dummy-1024x576-Waterfalls.jpg');
    background-position: center center;
    background-size: cover;
    position: relative;
}

.text {
    width: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 100px;
    line-height: 1.0;
    text-transform: uppercase;
}

.part1, .part2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.part1 .text {
    position: relative;
    z-index: 2;
    background: url('http://dummy-images.com/nature/dummy-1024x576-Waterfalls.jpg');
    background-position: center center;
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.part2 {
    color: rgba(255, 255, 255, 0.5);
    z-index: 3;
    clip-path: polygon(400px 0px, 100% 0px, 100% 100%, 400px 100%);
}
<div class="example">
  <div class="part1"><span class="text">Stack<br>Overflow</span></div>
  <div class="part2"><span class="text">Stack<br>Overflow</span></div>
 </div>

UPDATE: I've noticed a small alignment issue with the background under the text in the initial version. The updated version resolves this problem, but it requires that the .text elements have a width of 100% to properly align the backgrounds. This may necessitate additional padding if further alignment is needed for the text.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

javascriptcssreactjsmaterial-uireact-router

Convert the html list to a select dropdown with a hidden input type

In the process of revamping some code created by a fellow colleague, I have decided to modify his list into a more suitable select-option drop-down list. The PHP code provided by him looks like this: echo "<ul>"; echo "<li><a href='#& ...

javascriptphphtmlselecthidden-field

Challenges of relative positioning with dynamic height based on content

Hello! I'm trying to achieve this https://i.stack.imgur.com/Q6lXP.png In this case, there are 3 divs. The top one will have a width of 100% and a height of auto, with relative positioning. The second div is similar, but I plan to add some dummy text ...

htmlcss

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

Is the utilization of a PHP snippet for translated content considered a beneficial practice? Are there ways to enhance or simplify this process further?

I am in the process of creating a website that will display translated content using different gTLDs. For example, example.com, example.fr, example.de. The plan is to have all these domains redirect to the same content on one server. Then, based on the gT ...

phphtmllanguage-translation

Scrolling Down on a Jquery Login Page

I am currently utilizing JQuery version 1.4.2. My objective is to allow the user to scroll down to the login form by clicking on the 'login' option in the top menu, similar to Twitter's design. The implementation works impeccably with insert ...

javascriptjqueryruby-on-railscssinsertafter

Utilizing a media query to execute a <script> exclusively on desktop devices

I am attempting to only run <script type="text/javascript" src="#" data-cfasync="false" async="async"></script> on desktop devices. I experimented with <style> @media screen and (max-width: 600px) { ...

htmlcss

Displaying the user's username upon logging into a website is a simple yet effective

I have successfully developed a simple web page using PHP and HTML. However, I am facing an issue in displaying the username after login. Additionally, I would like to hide the login and signup sections after successful login. Can anyone provide assistance ...

phphtmlcss

Angular 1.5 component using HTTP GET

Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...

javascripthtmlangularjs

"div p" or "div * p"? Do they have the same meaning or is there a difference between them?

My knowledge of the "grandchild" selector in CSS was limited until I came across this insightful article. Intrigued, I decided to experiment with it and found that it resembles the universal selector (which targets all elements). Let's take a look at ...

htmlcsscss-selectors

Why does the pound symbol in z-index always show up in Angular?

Having an issue with my code where I set a z-index in the CSS like this: .mat-mini-fab { position: absolute; right: 5px; top: 4px; z-index: 999; box-shadow: none !important; } However, whenever I visit my site, the z-index is not being appl ...

javascriptcssangulartypescript

Utilize the jQuery ajax post method within each loop to handle asynchronous requests, ensuring that the

I am currently working on a jQuery ajax function that is embedded within an each function as it needs to be executed for each post on the website. $('.post .button').each(function() { $(this).click(function() { $.ajax({ url: 'action ...

phpjqueryhtmlcssajax

Troubleshooting Problems with CSS Span Placement

Challenges with Span Positioning in CSS Currently, I am encountering difficulties while working on the index.html.erb file for an example Rails website. Below is a snippet of the HTML code I am struggling with (please note that this is simply a fabricated ...

htmlcssruby-on-railscss-position

Ensuring proper alignment between labels and input

How can I align a label and a range input field on the same line? I have tried using display: inline-block, but it does not seem to work. There doesn't appear to be any conflicting styles, and all sources indicate that this approach should be effect ...

htmlcssformsinput

Tips for successfully sending data to an ng-include controller

So, I've got this ng-include html element, and I'm trying to figure out how to pass data from an external source to the controller. The primary controller is responsible for fetching json data from a http webservice, and then parsing that data i ...

javascripthtmlangularjs

Troubleshooting a Navbar Issue in a Custom Bootstrap Template

I am a beginner in html and bootstrap, but I recently attempted to create my own bootstrap template. Initially, I tried to work with the "starter template" code from getbootstrap.com, but after launching the code and making some changes, the navigation bar ...

htmlbootstrap-4navbar

Keeping the header in place: fixed positioning

This particular situation is quite challenging for me. I have a webpage that requires horizontal scrolling. There is a menu at the top of the page that needs to remain centered on the page at all times. Even with the use of jQuery, I am uncertain how to ac ...

htmlcsspositionfixed

Contrasting one-finger scrolling versus dual-finger scrolling on a touch device with IE11

Can you explain the distinction between scrolling using one finger versus two fingers in IE11? I have noticed that I am able to scroll/pan the webpage with just one finger on certain elements, while on other elements, I need to use two fingers on a Micros ...

htmlcssinternet-explorer-11multi-touch

The animation-play-state is set to 'running', however, it refuses to start playing

I'm in the process of creating a landing page that includes CSS animations, such as fade-ins. Initially setting animation-play-state: "paused" in the CSS file, I later use jQuery to trigger the animation while scrolling through the page. While this s ...

javascriptjquerycssjquery-uicss-animations

Enhance data validation in PHP

I love using Nicedit as a text editor because it allows me to easily add bold and italic formatting to my form fields. However, when I try to store this text in my database, Nicedit adds HTML tags for bold, italic, and other formatting styles. Is there a ...

javascriptjqueryhtmlnicedit