根据背景更改文本颜色

Question

I have a CTA that slides out when you hover over it. The problem I have is that the text is sometimes hard to read depending on the background colour. I've created a demo of what I'm trying to achieve, you can check it out here:

Demo on CodePen

The essence of this demo is: HTML:

<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

The CSS looks like this:

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      color: #CCCCCC;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

Any suggestions on how to get this right? I've looked at a few JavaScript-based examples but my JavaScript skills aren't there yet...

Many thanks

Answer 1

It is not advisable to share offsite links that might be erased however this is a good start. 7 Practical Tips for Cheating at Design

Summary has been done in the comments to the CSS.

.at-about-fab {
  z-index: 999999;
  position: fixed;
  /*Dropped the right to hide the text block a little more - you can ignore*/
  right: 0px;
  bottom: 20px;
  /*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
  background-color: white;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      /*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
      color: #999;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

/* Just for the sake of testing */
.content{
    position:relative;
}


#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:250px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #444444;
}

#section4
{
    background: #BA2322;
}

Codepen Demo

Answer 2

You could use mix-blend-mode: exclusion; with the help from data attribute and ::after selector:

 .at-about-fab { z-index: 999999; position: fixed; right: 20px; bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.2s ease; transition: 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .at-about-fab:before { content: ""; position: absolute; display: block; top: 50%; left: -58px; width: 58px; height: 48px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .at-about-fab:hover { -webkit-transform: translateX(0%); transform: translateX(0%); } .at-about-fab:hover .at-about-fab__meta { opacity: 1; } .at-about-fab__thumbnail { position: absolute; top: 50%; left: -58px; background: #FFFFFF; width: 48px; height: 48px; border: 1px solid #EEEEEE; border-radius: 100%; padding: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; cursor: pointer; } .at-about-fab__thumbnail img { display: block; width: 100%; border-radius: 100%; } .at-about-fab__meta { font-family: 'Open Sans', sans-serif; opacity: 0; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .at-about-fab__meta h2, .at-about-fab__meta p { margin: 0; padding: 0; } .at-about-fab__meta h2 { color: #444444; font-size: 14px; font-weight: 600; } .at-about-fab__meta p { color: #CCCCCC; font-size: 12px; font-weight: 400; } .at-about-fab__meta a { color: inherit; font-weight: 400; text-decoration: none; } /* Just for the sake of testing */ .content { position: relative; } #wrapper { position: relative; } .section { width: 100%; text-align: center; padding: 250px 0; border: 1px solid #666; position: relative; color: black; } .section:after { content: attr(data-content); position: absolute; width: 100%; height: auto; text-align: center; top: 50%; left: 0; mix-blend-mode: exclusion; color: white; } #section1 { background: #fff; } #section2 { background: #000; } #section3 { background: #444444; } #section4 { background: #BA2322; } 

 <!-- Credits --> <!-- Developer - Andy Tran (https://andytran.me) --> <!-- Design - Andy Tran (https://andytran.me) --> <div class="at-about-fab"> <div class="at-about-fab__thumbnail"> <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" /> </div> <div class="at-about-fab__meta"> <h2>Call Us Now</h2> <p><a href="te:555-555-5555">555 555 5555</a></p> </div> </div> <!-- Just for the sake of testing --> <div class="content"> <div id="wrapper"> <div class="section" id="section1" data-content="section1"></div> <div class="section" id="section2" data-content="section2"></div> <div class="section" id="section3" data-content="section3"></div> <div class="section" id="section4" data-content="section4"></div> </div> </div> 

Here is also a link to the updated codepen with SCSS .

Answer 3

You can try something like this:

Idea

• Add mouseover event on main container.
• In this handler, have a variable that will hold classname that is to be added.
• On hover:
  • Get all sections.
  • Check the bounds of current section with icon's bound.
  • If top of icon is greater than top of section, update the className variable
  • If not, break the loop.
  • Now remove all classes add className to container. You will also have to write corresponding classes in CSS as well.

Sample: Updated CodePen

var iconContainer = document.querySelector('.at-about-fab');

iconContainer.addEventListener('mouseover', function () {
  var bounds = this.getBoundingClientRect();
  var sections = document.querySelectorAll('.section');
  var className = '';
  Array.from(sections).some(function(el) {
    var currentBounds = el.getBoundingClientRect();
    if(bounds.top > currentBounds.top) {
      className = el.getAttribute('id');
    }
    else {
      return true;
    }
  });
  this.classList.remove('section1', 'section2', 'section3', 'section4');
  this.classList.add(className);
})