在 css 中的图像上覆盖字体真棒图标

Question

I tried to overlay a font-awesome icon on an image, but the image is visible and the icon is not visible.

<i class="fa fa-play-circle-o" aria-hidden="true"></i>
<img src="../images/tbt.jpg"></img>

i {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 50%;
}
img {
   position: relative;
   z-index: -1;
}

Answer 1

You can add opacity in style

i {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
opacity: 0;
}
img {
position: relative;
z-index: -1;
}
i:hover {
opacity: 1;
}

Answer 2

you did not mention the parent position. wrap both inside a any block tag like div, section and assign style position relative to this block level tag.

<div style="position:relative">
<i class="fa fa-play-circle-o" aria-hidden="true"></i>
<img src="../images/tbt.jpg"></img>
</div>
i {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 50%;
}
img {
   position: relative;
   z-index: -1;
}