CODEWITHSUNDEEP
htmlcss
Lewis Menelaws
Lewis Menelaws

Reputation: 1186

Element not appearing over top of background color

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:

enter image description here

And after I click:

enter image description here

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>

Upvotes: 0

Views: 199

Answers (1)

Nelson Yeung
Nelson Yeung

Reputation: 3392

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>

Upvotes: 2

Related Questions