CODEWITHSUNDEEP
htmlcssimagesassfont-awesome
skp
skp

Reputation: 43

Overlaying a font-awesome icon on an image in css

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;
}

Upvotes: 1

Views: 2812

Answers (2)

Abhishek Kasera
Abhishek Kasera

Reputation: 46

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;
}

Upvotes: 1

akhila
akhila

Reputation: 9

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;
}

Upvotes: 1

Related Questions