Highlight keywords of text on hover

highlight-keywords-of-text-on-hover.markdown

Highlight keywords of text on hover

Just a little experiment. When hovering over the article with your mouse, some keywords from the text should be easy readable while the rest should be darker.

A Pen by Bas Groothedde on CodePen.

License.

index.html

<div id="centerbox">
<h1>Hover one of the articles</h1>
  <article class="highlight">
    <p>
      This is some long <span>text</span> with some words that might turn up <span>more important</span> than other words. The <span>interesting</span> part about this idea, is that you can <span>hide keywords</span> in the actual text you're reading. Like this, <span>on hover</span>, you can actually <span>just show the keywords</span>.
    </p>
  </article>

  <article class="highlight">
    <p>
      This is some long <span>text</span> with some words that might turn up <span>more important</span> than other words. The <span>interesting</span> part about this idea, is that you can <span>hide keywords</span> in the actual text you're reading. Like this, <span>on hover</span>, you can actually <span>just show the keywords</span>.
    </p>
  </article>
</div>

script.js

/**
  Javascript isn't required for this effect,
  I just added a quick piece of jQuery code
  to simulate a hover for the animated preview
  on CodePen.io.
*/

// simulation code, ignore it.
$(function() {
  setTimeout(function() {
    $("article.highlight").toggleClass("hover");
    setTimeout(function() {
      $("article.highlight").toggleClass("hover");
    }, 2000);
  }, 1000);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

*, *::before, *::after {
  box-sizing: border-box;
  font-family: "Roboto", "Helvetica", sans-serif;
  font-weight: 300;
}

body, html {
  margin: 0;
  padding: 0;
}

body {
  background: #331100;
  padding: 5px;
  
  h1 {
    margin: 0 0 .5em 0;
    color: #ffffff;
    text-shadow: 0px 0px 10px #000000;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  }
  
  #centerbox {
    width: 500px;
    margin: 0 auto;
  }
}

article.highlight {
  margin-bottom: 10px;
  width: 500px;
  padding: 5px;
  font-size: 0.9em;
  
  color: #cecece;
  background: #000000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-shadow: 0px 0px 10px #000000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  
  /* 
    all elements in this element will change 
    color through a 0.1 second lasting linear
    transition.
  */
  * {
    transition: color 0.1s linear;
  }
  
  // make sure span keeps this color
  span {
    color: #cecece !important;
  }
  
  p {
    margin: 0;
  }
  
  /*
    change the text-color on hover, the color 
    in span will not change due to !important.
  
    additionally, the .hover class on the 
    article.highlight element will achieve
    the same result.
  */
  &:hover, &.hover {
    color: #333333;
  }
}