Unwanted Text Shadow Displaying Text Pre-Hover

Question

I have a feed-reader that displays text on hover. Before hovering, some text shadow is present, making the word shadow visible.

http://codepen.io/Teeke/pen/JWqpoP

 a{
        color: inherit;
        text-decoration: none;
   }  

I've tried changing line 109 in the CSS from

'color: inherit'

to transparent, or rgba(0,0,0,0), but that will make all the text disappear.

How can I fix this CSS conflict?

Answer 1

I got some interesting tips from everybody's answers here, but I went the easiest route. I had some code in the body section of the CSS:

text-shadow: 2px 2px 2px rgba(100,100,120,0.8);

affecting all the text throughout the page. I removed it from body and inserted it into each individual selector as needed.

Answer 2

It looks like making this change to the SCSS code:

&:hover{
  .bar, .overlay{
    transform: translateY(0);
    color: inherit;
    text-shadow: 2px 2px 2px #222;
  }

and removing the text-shadow from the .item selector also works.

Answer 3

You don't want to change your font to transparent to fade an element like that. Besides just being a bad practice and pain in the butt to work with, it isn't performant. Just fade the entire .bar and .overlay from opacity: 0 to opacity: 1 on hover

var Settings = {
  subreddit : 'PositiveTechnology',
  after: 'o',
  limit: 25
}

let d = new Date; document.getElementById("date").innerHTML = d.toUTCString();;

let $grid = $('#positive-technology')
  .attr('data-loading-text','')
  .packery({ itemSelector: '.item' })
  .on('click','.overlay', function(){
    $(this).parent().toggleClass('active').parent().packery('layout');
  });

function RedditJSON(){  
  this.loadLink = function(){
    Settings.isLoading = true;
    return 'https://www.reddit.com/r/' + Settings.subreddit + '/.json?after=' + Settings.after + '&limit=' + Settings.limit;
  }
  
  this.next = function(feed){
    if (Settings.theLast) return;
    if (feed.data.after == null) Settings.theLast = true;
    let posts = feed.data.children;
    for(let i = 0; i < posts.length; i++){
      if(true){ // posts[i].data.post_hint == 'image' || posts[i].data.url.search('imgur')
        if(!posts[i].data.hasOwnProperty('preview')) continue;
        
        let image = posts[i].data.preview.images[0];
        let permalink = 'https://reddit.com' + posts[i].data.permalink;
        
        let elem    = $('<div>').addClass('item').css('background-image', 'url(' + image.source.url + ')');
        let overlay = $('<a>').addClass('overlay').appendTo(elem);
        let bar     = $('<div>').addClass('bar').appendTo(elem);
        let link    = $('<a>').addClass('post').attr({target: '_blank', href: permalink}).appendTo(bar).text(posts[i].data.title);
        let zoom    = $('<a>').addClass('zoom').attr({target: '_blank', href: image.source.url}).appendTo(bar).html('<i class="fa fa-camera-retro"></i>');
        
        if (posts[i].data.stickied){
          elem.addClass('stickied');
        }
        
        // if (image.source.width > image.source.height){
        //   elem.addClass('wide');
        // }
        
        // if(posts[i].data.created % 6 == 0){
        //   elem.addClass('active');
        // }
        
        $grid.append(elem).packery('appended', elem).packery('layout');
      }
    }
    
    Settings.after = feed.data.after;
    Settings.isLoading = false;
  }
}

var bob = new RedditJSON();

function loadNext(){
  if (Settings.isLoading){
    setTimeout(loadNext,100);
    return;
  } else {
    $.getJSON(bob.loadLink(), bob.next);
  }
}

$(function() {
  // return;
  loadNext();
  $(window).scroll(function () {    
    console.log($(window).scrollTop() + ' ' + ($('body').height() - $(window).height() - 10));
    if ($(window).scrollTop() >= $('body').height() - $(window).height() - 10 && !Settings.isLoading) {
      loadNext();
    }
  });
});

/* https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/ */
@import url("http://fonts.googleapis.com/css?family=Raleway:200,300, 800");
* {
  box-sizing: border-box;
}

body {
  margin-top: 100px;
  padding: 0;
  background: #181818;
  font-family: 'Raleway', sans-serif;
  color: rgba(250, 250, 250, 0.8);
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/577362/pexels-photo%20(4).jpg");
  background-size: 100% 90%;
  background-repeat: no-repeat;
  text-shadow: 2px 2px 2px rgba(100, 100, 120, 0.8);
}

.base-title {
  font-weight: 200;
  font-size: 85px;
  /* ORIG 70px */
}

h1 {
  text-align: center;
  font-weight: lighter;
}

h4 {
  text-align: center;
  font-weight: 300;
  margin-top: -10%;
  font-size: 20px;
}

#date {
  text-align: center;
  margin-bottom: 10%;
}

.ticker {
  margin-top: 7%;
}

.grid {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
}
.grid::after {
  display: block;
  content: attr(data-loading-text);
  text-align: center;
  width: 100%;
  padding: 20px 0;
  position: absolute;
  top: 100%;
}
.grid .item {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  overflow: hidden;
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 2px;
  margin-left: 30px;
  margin-bottom: 30px;
  box-shadow: inset 0 0 10px #000000;
  -webkit-filter: saturate(1.5) contrast(107%);
  text-shadow: 2px 2px 2px #222;
}
.grid .item.wide {
  width: 25%;
}
.grid .item.active {
  width: 25%;
  height: 600px;
}
.grid .item.wide.active {
  width: 100%;
  height: 650px;
}
.grid .item .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 4px;
  z-index: 4;
  color: white;
}
.grid .item .bar a {
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
}
.grid .item .bar a.zoom {
  float: right;
}
.grid .item .overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, #001, transparent 100px);
  z-index: 3;
}
.grid .item .bar, .grid .item .overlay {
  transition: transform 250ms, opacity 250ms;
  transform: translateY(80px);
  opacity: 0;
}
.grid .item:hover .bar, .grid .item:hover .overlay {
  transform: translateY(0);
  opacity: 1;
}
.grid .item.stickied .overlay {
  background: linear-gradient(to top, #0f0, transparent 80px);
}
@media (max-width: 520px) {
  .grid .item {
    width: 100% !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.js"></script>

<h1 class="base-title">Positive Technology</h1>
<!-- <h4>Useful News</h4> -->
<h1 class="ticker"> · Hydroponics · Aeroponics · Micro-solar · Micro-wind · 3D-Printing · Eco-Houses · Water Filtration ·</h1>
<div class="grid" id="positive-technology"></div>
<h2 id="date"></h2>

Answer 4

So, basically what you need to do is originally set the text shadow's color to transparent. Then, when it is hovered over, you can change the text shadow's color to whatever you want. Here's an example of what this effect looks like on text that's already visible:

h1 {
  color: red;
  text-shadow: 1px 1px 3px transparent;
}

h1:hover {
  text-shadow: 1px 1px 3px #333;
}

<h1>Hello world</h1>

Hope that helps!