Ways to Place Image and Icons at the Bottom of a Video with CSS

Question

Ways to Place Image and Icons at the Bottom of a Video with CSS

I'm looking to enhance my video by adding images and icons using CSS, but I'm not sure how to go about it.

The image that will serve as a profile picture and the icons should be similar to the ones shown in the image below:

https://i.sstatic.net/icFVW.jpg

I've attempted to use position: absolute, transform: translate(-50%, -50%), and bottom: 100%, but unfortunately, this method hasn't been successful. Here's what I've tried so far, but I'm struggling to get it right:

This design includes Bootstrap-5 classes and Video.js with Google icons incorporated.

.img_wrapper.a img {
        position: absolute;
        transform: translate(-50%, -50%);
        bottom: 100%;
    }
    
 .thumb{
        width: 30px;
        height: auto;
    }

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f7e9f5">[email protected]</a>/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfaef3b7bdb1b0ad9eeff0efeef0ea">[email protected]</a>/font/bootstrap-icons.css">
    <link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15524754515527253b3b212d">[email protected]</a>,100..700,0..1,-50..200" />
    
    <div class="container">
        <div class="row justify-content-center">

            <div class="col-md-2">
                
                <div class="row">
                    <video id="my-video"
                            class="video-js text-center"
                            controls
                            preload="auto"
                            height="400px"
                            data-setup="{}"
                            poster="https://thumbs.dreamstime.com/b/confident-black-business-man-stylish-suit-standing-folded-arms-rooftop-n-office-block-looking-camera-69650703.jpg"
                            muted>
                        <source src="" type="video/mp4">
                    </video>

                    <div class="img_wrapper">
                        <a style="text-decoration: none;" href="{{ video.get_user_public_url }}">
                            <p><img class="rounded-circle thumb" src="https://thumbs.dreamstime.com/b/confident-black-business-man-stylish-suit-standing-folded-arms-rooftop-n-office-block-looking-camera-69650703.jpg" alt="">
                                <b>Bamagujen Bahaushe</b>
                            </p>
                        </a>
                    </div>  
                    
                    <div class="video-icons">
                        <a href="">
                            <span class="material-symbols-outlined">
                                fingerprint
                            </span>
                        </a>
                        <a href="{% url 'Play-Video' video.slug %}">
                            <span class="material-symbols-outlined">
                                comment
                            </span>
                        </a>
                        <a href="{% url 'Complain-Video' video.pk %}">
                            <span class="material-symbols-outlined">
                                flag
                            </span>
                        </a>
                    </div>
                </div>
                
            </div>  
            
            <div class="col-md-6">
                <div class="content-right">
                    <p>Lorem ipsum dolor sit, amet consectetur
                        adipisicing elit. Qui, minus, optio atque nostrum 
                    repellendus delectus eos non veritatis, 
                    illum soluta quas id aliquid facilis molestiae 
                    facere nam neque? Fugiat, repellendus.</p>
                </div>
            </div>
            
            
        </div>
    </div>

html css twitter-bootstrap flexbox bootstrap-5

Answer 1

Answer №1

Here are the steps you need to follow:

Put text and icons in a row so that text is on the left and icons are on the right.
Apply Bootstrap classes position-absolute bottom-0 to the row and position-relative to the parent row to position text and icons at the bottom of the video.
Use Bootstrap classes d-flex flex-column on the right column to align icons vertically.
Add Bootstrap classes d-flex align-items-end to the row to move text down to the bottom due to the taller height of the right column with icons compared to the left column with text.
Include Bootstrap class mb-3 on the row for some bottom margin to enhance user experience.
Add Bootstrap class mx-auto to the row for horizontal centering.
Insert the following CSS to create rounded images using <img> tags on all screen sizes:
```
.rounded-circle { width: 25px; height: 25px; }
```
.
Assign Bootstrap class pe-1 (padding-right) to the left col and ps-1 (padding-left) to the right col for a narrower space between the image and "Bamagujen Bahaushe" text.

Refer to the code snippet below.

.img_wrapper.a img {
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 100%;
}

.thumb {
  width: 30px;
  height: auto;
}


/* Added */
.rounded-circle {
  width: 25px;
  height: 25px
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32100d0d06010600130232475c425c40">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e5c55554e494e485b4a1753595554497a0b140b0a14e4">[email protected]</a>/font/bootstrap-icons.css">
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebacb9aaafabd9dbc5c5dfd38bfab087739983bc78d381989c795786909525bfc69ec6ced28297e886898583dbcc85dfde8399dbeae4828791dd96889elykrrinrjclgljdcbffcbb">[email protected]</a>,100..700,0..1,-50..200" />

<div class="container">
  <div class="row justify-content-center">
    ...
  </div>
</div>

Answer 2

Here are the steps you need to follow:

Put text and icons in a row so that text is on the left and icons are on the right.
Apply Bootstrap classes position-absolute bottom-0 to the row and position-relative to the parent row to position text and icons at the bottom of the video.
Use Bootstrap classes d-flex flex-column on the right column to align icons vertically.
Add Bootstrap classes d-flex align-items-end to the row to move text down to the bottom due to the taller height of the right column with icons compared to the left column with text.
Include Bootstrap class mb-3 on the row for some bottom margin to enhance user experience.
Add Bootstrap class mx-auto to the row for horizontal centering.
Insert the following CSS to create rounded images using <img> tags on all screen sizes:
```
.rounded-circle { width: 25px; height: 25px; }
```
.
Assign Bootstrap class pe-1 (padding-right) to the left col and ps-1 (padding-left) to the right col for a narrower space between the image and "Bamagujen Bahaushe" text.

Refer to the code snippet below.

.img_wrapper.a img {
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 100%;
}

.thumb {
  width: 30px;
  height: auto;
}


/* Added */
.rounded-circle {
  width: 25px;
  height: 25px
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32100d0d06010600130232475c425c40">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e5c55554e494e485b4a1753595554497a0b140b0a14e4">[email protected]</a>/font/bootstrap-icons.css">
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebacb9aaafabd9dbc5c5dfd38bfab087739983bc78d381989c795786909525bfc69ec6ced28297e886898583dbcc85dfde8399dbeae4828791dd96889elykrrinrjclgljdcbffcbb">[email protected]</a>,100..700,0..1,-50..200" />

<div class="container">
  <div class="row justify-content-center">
    ...
  </div>
</div>

Answer 3

Answer №2

There are a few key points to consider here.

Firstly, I believe that the correct syntax should be img_wrapper a img instead of img_wrapper.a img. The former searches for the img_wrapper class with an anchor as a child node and an image as a child node of the anchor. The latter seems to be looking for a class that combines img_wrapper and a.

Secondly, it's important to ensure that the img_wrapper has a relative position.

I have also eliminated the translate CSS and replaced it with bottom and left attributes. Adjusting the pixel values for left and bottom may be necessary to achieve the desired outcome. Additionally, responsiveness might be a concern, but it can be addressed separately, as it depends on the specific requirements.

EDIT

I have created two JSFiddles. The first one features a wrapper positioned absolutely with a pixel value for right. I utilized a list structure and applied some styling to remove default bullet items, margins, and padding.

The second JSFiddle uses a flex layout to manage the content flow within the wrapper.

The following elements are worth noting:

HTML1:

<div class="img_wrapper_right">
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</div>

CSS1:

.img_wrapper_right {
    position: absolute;
    right: 20px;
    padding: 10px;
    background-color: #fc0;
}

.img_wrapper_right ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

HTML2:

<div class="img_wrapper_right">
   <p>Item 1</p>
   <p>Item 2</p>
   <p>Item 4</p>
   <p>Item 5 much longer item</p>
</div>

CSS2:

.img_wrapper_right {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    padding: 10px;
    background-color: #fc0;
}

.img_wrapper_right p {
    margin: 0;
}

If I were to approach this, I would consider abstracting the code. Creating multiple class names and passing attributes as needed could be beneficial. The primary class name can then inherit these attributes. For example:

.absolute-wrapper { position: absolute; }
.absolute-wrapper .left { left: 10px; }
.absolute-wrapper .right { right: 20px; }

etc.

JSFIDDLE1: https://jsfiddle.net/lharby/06vb932e/

JSFIDDLE2: https://jsfiddle.net/lharby/7g89bthv/

EDIT 2

Upon reviewing your question regarding the video-icons, it is essential to apply relative positioning to the nearest common parent for this to work. In your case, the row just above should have a relative position since it contains both the img_wrapper and video-icons as direct children. By adding a class to the row and positioning it relatively, you can then position both the img_wrapper and the video-icons inside this container using absolute positioning.

Answer 4

There are a few key points to consider here.

Firstly, I believe that the correct syntax should be img_wrapper a img instead of img_wrapper.a img. The former searches for the img_wrapper class with an anchor as a child node and an image as a child node of the anchor. The latter seems to be looking for a class that combines img_wrapper and a.

Secondly, it's important to ensure that the img_wrapper has a relative position.

I have also eliminated the translate CSS and replaced it with bottom and left attributes. Adjusting the pixel values for left and bottom may be necessary to achieve the desired outcome. Additionally, responsiveness might be a concern, but it can be addressed separately, as it depends on the specific requirements.

EDIT

I have created two JSFiddles. The first one features a wrapper positioned absolutely with a pixel value for right. I utilized a list structure and applied some styling to remove default bullet items, margins, and padding.

The second JSFiddle uses a flex layout to manage the content flow within the wrapper.

The following elements are worth noting:

HTML1:

<div class="img_wrapper_right">
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</div>

CSS1:

.img_wrapper_right {
    position: absolute;
    right: 20px;
    padding: 10px;
    background-color: #fc0;
}

.img_wrapper_right ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

HTML2:

<div class="img_wrapper_right">
   <p>Item 1</p>
   <p>Item 2</p>
   <p>Item 4</p>
   <p>Item 5 much longer item</p>
</div>

CSS2:

.img_wrapper_right {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    padding: 10px;
    background-color: #fc0;
}

.img_wrapper_right p {
    margin: 0;
}

If I were to approach this, I would consider abstracting the code. Creating multiple class names and passing attributes as needed could be beneficial. The primary class name can then inherit these attributes. For example:

.absolute-wrapper { position: absolute; }
.absolute-wrapper .left { left: 10px; }
.absolute-wrapper .right { right: 20px; }

etc.

JSFIDDLE1: https://jsfiddle.net/lharby/06vb932e/

JSFIDDLE2: https://jsfiddle.net/lharby/7g89bthv/

EDIT 2

Upon reviewing your question regarding the video-icons, it is essential to apply relative positioning to the nearest common parent for this to work. In your case, the row just above should have a relative position since it contains both the img_wrapper and video-icons as direct children. By adding a class to the row and positioning it relatively, you can then position both the img_wrapper and the video-icons inside this container using absolute positioning.

Ways to Place Image and Icons at the Bottom of a Video with CSS

Answer №1

Answer №2

Similar questions

Confirm the email address using the autocomplete feature in the field

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Table within a table does not occupy full height within a table cell

What are the steps for sharing and sending content using email?

Choosing elements in jQuery

Tips for incorporating personalized CSS properties, such as font-size, into all Django admin pages

"Taking cues from Instagram's web/desktop design, we have created

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

When hovering over a single list item, only the top border will be displayed without affecting the

Access the configuration of a web browser

Angular is having trouble properly rendering the Array Description

The <img> tag needs to dynamically adjust its size based on the width of its parent element, while ensuring it does not exceed its original dimensions

Bootswatch alternative for Bootstrap CSS without utilizing Google Fonts

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

The combination of eq, parent, and index appears to be ineffective

Update the default arrow icon in the expand/collapse navigation bar

CSS: Caption text below image remains on same line

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new