Element not appearing over top of background color

Question

I am making a play button that is orange and changes to a pause/play button after every click. The play and pause button appear but the background color is covering the play button but not the pause button. Here are images for reference:

How the button appears now:

And after I click:

For some reason the pause button appears just fine but the play button doesn't show up at all. Here is the entire HTML and CSS for this to work.

$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});

.play {
  display: inline-table;
  width: 0%;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #f9f9f9;
  margin: 100px auto 50px auto;
  position: relative;
  z-index: 20;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 10px;

}
.play:before {
  content: '';
  position: absolute;
  top: -75px;
  left: -115px;
  bottom: -75px;
  right: -35px;
  border-radius: 50%;
  border: 10px solid #FB5100;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  background: #FB5100;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 50px;
  height: 80px;
  /*background: #2c3e50;*/
  position: absolute;
  right: 13px;
  top: -40px;
  z-index: 555555;
  border-left: 20px solid #f9f9f9;
  border-right: 20px solid #f9f9f9;
  box-shadow: inset 30px 0 0 0 #FB5100;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<a href="#" title="Play video" class="play"></a>
</div>

*For some reason the play button appears just fine but the play button doesn't show up at all.* This is self-contradictory. — connexo, Jan 16 '17 at 17:15
Sorry, I mean the pause button. Thanks for pointing that out. — Lewis Menelaws, Jan 16 '17 at 17:16
@Deep yes, I am using jQuery, I didn't post because I feel like it may not be relevant to the solution. I will post it above just in case. Thank you. — Lewis Menelaws, Jan 16 '17 at 17:23
Can you give us a working demo of the problem. Right now the pause does not show when you click, so it's hard to tell what the problem is. — Josh Sanger, Jan 16 '17 at 17:25
so your code says you are toggling the active class which will add/remove the pause image. is that not happening or you have a play image as well ? — Deep, Jan 16 '17 at 17:27
I included a working demo of my current problem. @JoshSanger — Lewis Menelaws, Jan 16 '17 at 17:33
@Deep, I included `background: #FB5100;` which put the background to that color but it goes over top of the play button. If i remove that property I will be able to see the play button. I want the play button on top. — Lewis Menelaws, Jan 16 '17 at 17:39

score 2 · Accepted Answer · edited May 23 '17 at 12:01

I've removed the z-index of the parent and changed the z-index: -1 for the before pseudo element to get it working. Check out this post: Is it possible to set the stacking order of pseudo-elements below their parent element?

$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});

.play {
  display: inline-table;
  width: 0%;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #f9f9f9;
  margin: 100px auto 50px auto;
  position: relative;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 10px;

}
.play:before {
  content: '';
  position: absolute;
  top: -75px;
  left: -115px;
  bottom: -75px;
  right: -35px;
  border-radius: 50%;
  border: 10px solid #FB5100;
  z-index: -1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  background: #FB5100;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 50px;
  height: 80px;
  /*background: #2c3e50;*/
  position: absolute;
  right: 13px;
  top: -40px;
  z-index: 555555;
  border-left: 20px solid #f9f9f9;
  border-right: 20px solid #f9f9f9;
  box-shadow: inset 30px 0 0 0 #FB5100;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<a href="#" title="Play video" class="play"></a>
</div>

Hi Nelson, this worked for me. Thank you for the help and providing further information. Great answer. — Lewis Menelaws, Jan 16 '17 at 17:47

Element not appearing over top of background color

1 Answers1