2

I need to overlay a microphone icon over an image (kind of watermark). Need this icon to be centered horizontally and vertically. The image may be resized depending on the browser size but the microphone should always stay centered.

Below is what i have so far but when image is resized microphone icon is not adjusted.

img {
  width: 50%;
}

.featured-img {
  text-align: center;
}

.featured-img img {
  border: 1px solid red;
}

.watermark {
  position: absolute;
  margin: 0 auto;
  left: -80px;
  right: 0;
  top: 20%;
  width: 0%;
  opacity: 0.8;
  color: black;
  font-size: 1000%;
}
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

<div class="featured-img">
  <img src="https://www.iconsdb.com/icons/preview/red/cat-3-xxl.png">
  <i class="fa fa-microphone fa-5x watermark"></i>
</div>

Try to resize and you'll see that microphone is not correctly placed.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Bronzato
  • 9,438
  • 29
  • 120
  • 212
  • to vertically center the icon, add to .watermark{ transform: translateY(-50%); top: 50%; }, and to center it horizontally, the .watermark width should the same as the psuedo element (::before), and set left to 0 instead of -80px, [check this](http://jsfiddle.net/hqctw3bn/) – Mohammad Aug 26 '19 at 14:53

2 Answers2

2

Add position: relative; to the image and update the icon with:

.watermark {
  position: absolute;
  margin: 0 auto;
  left: 50%; //added
  top: 50%; //added
  transform: translate(-50%, -50%); //added
  width: 0%; // removed
  opacity: 0.8;
  color: black;
  font-size: 1000%;
}

Is that what you want?

pistevw
  • 432
  • 4
  • 15
2

Use this code:

.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;

}

.icon {
  color: white;
  font-size: 10vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <img src="https://via.placeholder.com/300" alt="Avatar" class="image">
  <div class="overlay">
  <a href="#" class="icon" title="User Profile">
   <i class="fa fa-microphone fa-3x watermark"></i>
  </a>
  </div>
</div>
Webdeveloper_Jelle
  • 2,868
  • 4
  • 29
  • 55