[FIXED] How to cover image with an icon

Issue

Here's example https://jsbin.com/rekaxa/edit?html,css,output. I'd like to put that red circle(an icon) over the image, but to keep html straightforward. What's the best way(maybe totally different) to implement it?

Solution

You haven't said where you want the icon to be so I picked the dead center of the div.

div {
  background-color: green;
  width: 280px;
  height: 180px;
  position: relative;
}
img {
  margin: 0 auto;
  display: block;
}
div:after {
  content: '';
  position: absolute;
  top: 50%; /* adjust as requiured */
  left: 50%; /* adjust as required */
  margin-top: -15px;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  background: red;
  display: block;
  border-radius: 15px;
}

<div class="icon">
  <img src="http://dummyimage.com/200x150/000/fff" />
</div>

Answered By - Paulie_D

Answer Checked By - Marilyn (PHPFixing Volunteer)