The overlay image is not positioned correctly in the center

I am struggling with positioning a play icon overlay on the image in my list-group-item. The current issue is that the icon is centered on the entire list-group-item instead of just the image itself. I am working with bootstrap 4.4.1.

Here is the HTML structure:

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

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

I need help to ensure that the play icon appears perfectly centered on the image. Any suggestions?

htmlcssbootstrap-4

Answer №1

I successfully integrated this code into your CSS file for optimal performance:

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

Moreover, I identified an error in your existing CSS code:

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

Answer №2

For the video-item-img in my code, I included CSS to define its width and set it to position relatively because applying position: absolute solely on the play icon only functions for positioned elements.

Absolute position: The element is taken out of the regular document flow, leaving no space created for it in the page layout. It gets positioned relative to its closest positioned ancestor, if available; otherwise, it's placed relative to the initial containing block. Its final placement depends on 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieve a stylish layout by displaying three cards per row using Vue.js and Bootstrap 4

I'm facing an issue with my code where I am trying to display Bootstrap cards in rows of three, but the layout is not rendering correctly. It starts with one card, then two, and eventually adds a new column, resulting in some empty spaces with offsets ...

csstwitter-bootstrapvue.jsvuejs2bootstrap-4

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

I have a specific layout requirement that needs to resemble this example: https://i.sstatic.net/4kP2q.png The desired layout should utilize CSS properties like display: grid; someFunction(data) { this.data = data; ...

htmlangulartypescriptinnerhtmlngfor

Using CSS, you can utilize a three-dot pattern to create a unique X

Hey there! I've got a menu with three dots that animate, and when I click on them, I want them to transform into an X shape. You can check out the demo here: demo Here's the HTML: <div class="dots"> <div class="dot"></div> & ...

htmlcsscss-animations

Steps for developing a floating image transition using CSS and React

Looking to achieve a floating image transition using CSS and React, similar to the Divi theme header images. Check out the example below: enter image description here For more information, visit: ...

cssreactjs

Attempting to dynamically update the image source from an array when a click event occurs in a React component

Has anyone successfully implemented a function in react.js to change the image source based on the direction of an arrow click? For instance, I have an array set up where clicking the right arrow should move to the next image and clicking the left arrow s ...

javascripthtmlcssarraysreactjs

What is the best method for combining several variables into a single one using a parameter?

On the webpage, there is a table containing 11 checkboxes. I am looking to create a keyword that allows testers to input just 1, 2, or 3 to select a specific checkbox without needing multiple lines of element variables. Here are the elements: xpath=(//in ...

cssseleniumxpathrobotframework

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

phphtmlcsstwitter-bootstrap-3

Modifying a Field's Value by Referring to a Different Field

I am working on developing a form that includes a dropdown menu for changing the aircraft type. Additionally, I want to incorporate another field named "Registrations" which will automatically update the available registration options based on the selected ...

javascriptphphtmlforms

Ensure that the text is wrapped properly when implementing innerHTML functionality

Within my Angular 5 application, I am faced with a requirement to display HTML content retrieved from a database. An example of the text stored in the database is: <div><u>Documents and Files</u></div><ul><li>These docu ...

javascriptcssangularinnerhtml

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

javascriptcss

Is there a way to personalize the link in a Cognito confirmation email?

Users who register through my application will receive an email from Cognito containing a verification link. AWS Cognito offers a template ({## text ##}) that will be converted into a link, such as <a href='link-to-confirm'> text </a> ...

htmlamazon-web-servicesemailamazon-cognito

The styling applied through the MUI TextField sx props does not take effect

Currently, I am attempting to customize a TextField component in a unique way using the sx prop: <TextField size="small" sx={{ padding: '1px 3px', fontSize: '0.875rem', lineHeight: '1.25 ...

htmlcssreactjsmaterial-uijsx

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

Trimming content within an editable div in JavaScript: A guide

I am working on an editable div feature where users can input text for comments. My goal is to eliminate any unnecessary spaces before and after the text. For example, if a user types: "&nbsp;&nbsp;Hello&nbsp;world&nbsp;&nbsp;&nbsp ...

javascripthtmlcontenteditable

Arranging elements in a row and column to ensure proper alignment

https://i.stack.imgur.com/LMsTg.png I'm having trouble aligning the UI elements in my Bootstrap 5 project. I can't seem to pinpoint the issue despite trying various solutions. Here's the code snippet: <div class="container"> ...

csslaravelbootstrap-5

Can you tell me where the templates store their icons?

Hey there, thank you for taking the time to read my question. I have a template that can be found at this link: In the top left corner of the template, there is an icon of a home. I have copied the entire website, including images, css, and js files, but ...

htmlcss

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...

htmlcsscss-float

Tips for presenting text and an icon side by side on a single line

I am currently using Bootstrap 4 and Font Awesome to showcase text and an icon on the same line. However, I am facing an issue where the icon is appearing on a separate line below the text instead of at the right corner as desired. How can I resolve this l ...

bootstrap-4

What is the reason for the row class taking up only 50% width in Bootstrap 4?

Below is the code snippet that I have been working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co ...

bootstrap-4

What is the best way to save a JavaScript variable in local storage?

I am facing an issue with a JavaScript variable named addNumber. This variable is responsible for adding 1 to a div every time a button is clicked. However, the problem arises when I navigate between different pages on my website - the counter resets back ...

javascripthtml