css overlay img centers in wrong place-CodePudding

I have list-group-item elements that each holds an image and some text. The image is set to the left, text to the right.

I want a play icon overlay over the image, in its center, but instead its centered on the list-group-item instead. I'm using bootstrap 4.4.1.

Html

<div class="video-list-stacked">
  <ul class='list-group video-list-container'>
    <li id="some-guid-01" class="list-group-item video-item">
      <div class=video-item-img>
        <img src="https://via.placeholder.com/140x100" />
        <img class="video-item-playicon" src="https://images.vexels.com/media/users/3/131784/isolated/preview/a9ff82db0cf438516e13b8c3bf918a00-play-flat-icon-by-vexels.png">
      </div>
      <div class="video-item-details">
        <h4>Video Title 1</h4>
        <div>Description for Video Title 1. A little description that elaborates what this is. The description should take not more than two lines.</div>
        <span class="video-item-tag">Tag One</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
      </div>
    </li>
</div>

CSS

.video-item{
 display: flex;
 padding-left: 5px;
}

.video-item-details {
  padding-left: 10px;
}

.video-item-tag {
  background: #2196F3;
  padding: 2px 10px 2px 10px;
  float: left;
  margin: 2px;
  margin-bottom: 5px;
  border-radius: 100px;
  color: white;
  font-family: monospace;
  font-size: 8pt;
  position: relative;
  cursor: pointer;
  
  text-align: center;
}

.video-item-playicon {
  position: absolute;
  width: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer: center;
}

What do I need to do to make the play icon appear centered in the image?

CodePudding user response：

I added css for video-item-img to set the width and to position relatively because using position: absolute on the play icon only works for positioned elements.

Absolute position: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

MDN

.video-item {
  display: flex;
  padding-left: 5px;
}

.video-item-details {
  padding-left: 10px;
}

.video-item-tag {
  background: #2196F3;
  padding: 2px 10px 2px 10px;
  float: left;
  margin: 2px;
  margin-bottom: 5px;
  border-radius: 100px;
  color: white;
  font-family: monospace;
  font-size: 8pt;
  position: relative;
  cursor: pointer;
  text-align: center;
}

.video-item-playicon {
  position: absolute;
  width: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer: center;
}

.video-item-img {          /*<------- added */
  width: fit-content;      /*<------- added */
  position: relative;      /*<------- added */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<div class="video-list-stacked">
  <ul class='list-group video-list-container'>
    <li id="some-guid-01" class="list-group-item video-item">
      <div class=video-item-img>
        <img src="https://via.placeholder.com/140x100" />
        <img class="video-item-playicon" src="https://images.vexels.com/media/users/3/131784/isolated/preview/a9ff82db0cf438516e13b8c3bf918a00-play-flat-icon-by-vexels.png">
      </div>
      <div class="video-item-details">
        <h4>Video Title 1</h4>
        <div>Description for Video Title 1. A little description that elaborates what this is. The description should take not more than two lines.</div>
        <span class="video-item-tag">Tag One</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
      </div>
    </li>
</div>

CodePudding user response：

I only added this code to your css and that is working fine:

.video-item-img {
    position: relative;
}

Also I think you have a mistake in your CSS:

.video-item-playicon {
    cursor: pointer; /* not pointer:center */
}