Removing filter from code

HTML & CSS
1

Removing filter from the code causes 2 of the play images to become invincible.

/* filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));*/
https://jsfiddle.net/2d4vwjgm/

Removing position:

 .play {
 /* position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;*/
}

I get this:
https://jsfiddle.net/jL12etyz/1/

But then, how do you center the play svgs?

2

You really must remember and practice the very basics of css. When you remove the filter you remove a stacking context so you need to create one with position:relative.

.playa,
.playb,
.playc {
  margin: auto 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position:relative;
  /*filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));*/

}

2 Likes
3

Fixed: https://jsfiddle.net/2d4vwjgm/1/

I found that here:

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.