Adjust the text color based on the background image or color

Here on this site, I have designed the first div to display a dark image, while the second one shows a light background.

I am aiming to adjust the sidebar text color based on whether it is displayed against the dark or light background. How can I achieve this for two different color options?

For reference, here is another website that demonstrates what I am trying to accomplish: 

 <div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>
javascriptjqueryhtmlcss

Answer №1

One plugin that I really enjoy using is . It's definitely worth giving it a try!

Answer №2

Adjusting text color based on background color can be achieved using a tool called background-check.

The GitHub page explains:

Automatically changing to a darker or lighter version of an element depending on the brightness of the images behind it.

Here are some alternative methods:

  • Changing text color based on background color with CSS
  • Adapting text color based on brightness of the background area
  • Dynamically modifying text color according to background image
  • Inverting CSS font color based on background color

UPDATE

Take a look at the sidebar of this website:

A seamless color transition for the text determined by the background image or color.

I had a conversation with the designer who mentioned they utilize:

Answer №3

<div id="main_wrapper">
    <div id="main_header_wrap"> <!-- CUSTOM BACKGROUND -->
        <h1 class="header_text"> Explore Paris in a Whole New Light </h1> <!-- TEXT TRANSITIONING FROM BRIGHT TO DIM -->    </div>
    <div id="city_guide_container"> <!-- UNIQUE BACKGROUND --></div>
 </div>


    <script>

    $(document).ready(function() {
        $("#main_header_wrap").hover(function() {
            $("body").css("background-color","bright"); //custom color update
        });
    $("#city_guide_container").hover(function() {
            $("body").css("background-color","dim"); //custom color update
        });

    });
    </script>

Experimented with div hover effects. Give it a try!

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

Refrain from engaging with "disabled" table rows to prevent user interaction

I have an HTML table with certain rows marked as 'disabled'. To make this clear to the user, I decided to apply a blur filter to the tr, resulting in a table that looks like this: https://i.stack.imgur.com/GcX67.png NOTE: You can view a live ex ...

htmlcss

The selected jQuery plugin is not functioning properly within CodeIgniter framework

I recently downloaded the jQuery Chosen plugin to use the simple "multiselect" version on my website. I followed all the necessary steps and even copied and pasted the code into CodeIgniter. Despite my experience with jQuery, I am facing an issue where the ...

javascriptjquerycodeigniter

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} https://i.sstatic.net/1AnDi.png I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="displa ...

javascriptjqueryhtmlcss

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

What is the best way to apply index-based filtering in Angular JS?

I am working on a tab system using ng-repeat to display tabs and content, but I'm facing some challenges in making it work seamlessly. Below are the tabs being generated: <ul class="job-title-list"> <li ng-repeat="tab in tabBlocks"> ...

javascriptangularjs

Error when navigating to a dynamic parameter path using Angular Router

I'm trying to redirect a user to a path with a unique UUID when they go to the root URL (localhost:4200). However, I encountered the following error: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'document/4fdb ...

javascriptangularangular-routing

"Could you please include some additional information in the provided prompt

Automating the Window: https://i.sstatic.net/CEKpH.png Issue: Our team recently implemented an authentication process for our staging environment, which requires additional steps during testing. I discovered that 'prompt()' cannot be easily capt ...

javascriptangularjsselenium-webdriverprotractor

Issues with triggering express.js app.post middleware

Logging to the console: app.use(function (req, res, next) { console.log(req.method) console.log('why is it not working?') }) However, the following code does not log anything: app.post(function (req, res, next) { console.l ...

javascriptnode.jsexpress

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

cssangulartwitter-bootstrap

Implementing a video background within a dynamic two-column layout, accompanied by text within a separate column

While viewing on a large screen with Bootstrap 5, everything looks good: https://i.sstatic.net/Vm6bH.png However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly. https://i.sstatic.n ...

cssbootstrap-5

Creating several Doughnut Charts within a single Canvas using Chart.js

Is there a way to display multiple layers of a doughnut chart simultaneously using Chart.js? Currently, I'm only able to see one layer at a time and the others become visible upon hovering over their position... If you have any insights on how to mak ...

javascriptjquerycanvaschartschart.js

Discover the underlying data within a nested JSON structure and track back to identify the corresponding values

In the JSON structure provided below, Suppose I have the chapter "number" and section "number". What is the most efficient way to search and trace backwards starting from what I already know, in order to find the "number" of the title within titles and t ...

javascriptarraysjson

Just starting out with CSS and coding. Setting up radio buttons and divs for a simple beginner's gallery

One challenge that perplexes me is how to reposition the concealed divs below the radio buttons with labels. Check out my HTML here View my CSS code here /*color palette: abls [lightest to darkest] #eeeeee #eaffc4 #b6c399 ...

htmlcssflexboxradio-buttonposition

The wonders of CSS flexbox and the power of justify-content

I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link ...

cssflexbox

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

javascriptreactjsnext.jsaxiosfetch-api

Bootstrap 5: After tapping on the button, the hue was transformed

I've been using Bootstrap buttons and I decided to change the color of one. However, when I clicked the button, it still changed to blue even though I specified ".btn-primary:active". HTML: <button type="button" class="btn btn-prima ...

htmlcsstwitter-bootstrapbootstrap-5

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

I have implemented a Bootstrap HTML section that consists of a container and two main rows. Here is the code snippet: <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style& ...

htmlcssbootstrap-4row

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

javascripthtmlcss

Is it recommended to incorporate router.isReady when making requests with react-query?

Struggling with incorporating react-query into my codebase, currently using getStaticProps. Experimenting with router.isReady from next/router to ensure the page waits for router.query value before passing it as props to the react hook. Take a look at my ...

javascriptreactjsgoogle-cloud-firestorenext.jsreact-query

Displaying numerous images/items in a Bootstrap 2.3 carousel

I have been working on a PHP-based website that utilizes Twitter Bootstrap 2.0. Currently, I am retrieving user information from a MySQL database and attempting to display them in separate frames or items within a carousel instead of all at once using a wh ...

phphtmlcsstwitter-bootstrapcarousel