Div overlaid on top of another div

My goal is to recreate the YouTube thumbnail with a timestamp at the bottom right corner of the image, like this:

However, I'm struggling to figure out how to overlay the timestamp on top of the image and position it correctly.

Here's the JSFiddle link for reference: http://jsfiddle.net/MgcDU/4162/

HTML:

<div class="container">
  <div class="small-video-section">
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-time">
      5:42
    </div>
  </div>
</div>

CSS:

.small-video-section {
  height: 134px;
}

.thumbnail-container {
  margin-top: 15px;
  margin-right: 20px;
}

.thumbnail-last {
  margin-top: 15px;
}

.thumbnail-time {
display: inline;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.8;
  padding: 2px 4px 2px 4px;
}

Any assistance would be greatly appreciated!

htmlcsstwitter-bootstrap

Answer №1

If you're looking to customize the positioning of a time display in your thumbnail, consider adding the following CSS code to your .thumbnail-time class and ensuring it is nested within the .thumbnail-container:

display: inline-block;
position: relative;
bottom: 18px;
right: 52px;

For a live example, check out this jsfiddle.

To further refine the placement of the time display, set a width for the container (e.g., 220px) with position: relative;, then add the following styling to your .thumbnail-time class:

display: inline-block;
position: absolute;
bottom: 10px;
right: 10px;

By implementing these changes, the time will consistently be positioned 10px from the bottom and right edges of the thumbnail. See how it works in action on this jsfiddle.

Answer №2

position: relative;
left: 200px;
top: 40px;

Implementing this in your .thumbnail-time class will achieve the desired effect, though there may be room for improvement.

Answer №3

Take a look at this amazing solution: http://jsfiddle.net/MgcDU/4172/

While I may not be an expert, this method is effective. If you come across a better approach, please leave a comment so that I can also enhance my knowledge :)

.small-video-section {
    height: 134px;
}
.thumbnail-container {
    margin-top: 15px;
    margin-right: 20px;
    position: absolute;
    display:inline-block;
}
.thumbnail-last {
    margin-top: 15px;
}
.thumbnail-time {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-top:20px;
    position:absolute;
    z-index:1;
    color: #ffffff;
    background-color: #000000;
    opacity: 0.8;
    padding: 2px 4px 2px 4px;
    display:inline;
}

Answer №4

It is essential to utilize the following CSS properties:

position:absolute;

Additionally, it is recommended to include this property as well:

z-index:1000;

This should be applied to the div element that contains the time.

For a demonstration, refer to this example: http://jsfiddle.net/MgcDU/4181/

Further information can be found at these resources: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?redirectlocale=en-US&redirectslug=CSS%2Fz-index

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

What is preventing the conditional class in Svelte from being applied when the page loads?

Contextual Background In my exploration of Sveltekit, I set out to construct a dashboard using Bootstrap tab components. To achieve this, I opted to utilize <buttons> instead of <a> tags to prevent redirection to different routes. My goal was ...

htmlcssbootstrap-5sveltesveltekit

Updating the Origin of a Sound Element in HTML5

I am currently working on developing a personalized browser-based music application. I am at the initial stage of this project where my main goal is to create a button that allows users to change the song being played by an HTML5 audio player. I have attem ...

htmlhtml5-audio

Unable to switch. Is there an issue with the initialization of Bootstrap 5 JavaScript?

I seem to be encountering an issue with my implementation of Bootstrap 5.0.0-beta2. While I can expand my navbars and accordions successfully, collapsing them does not work as expected. It appears that the problem lies in the initialization of the JavaScr ...

javascriptruby-on-railstwitter-bootstrapwebpackerbootstrap-5

Using a background image in CSS

I'm having an issue with this code. It doesn't seem to be displaying anything on the screen: <!DOCTYPE HTML> <head> <title> CSS(lab2) </title> <meta charset="UTF-8"> <style type = "text/css"> ...

htmlcss

Active Tab Indicator - Make Your Current Tab Stand Out

I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected. Any assistance would be greatly appreciated. ...

jqueryhtmlcss

Having difficulty handling text overflow in Angular4 and HTML

I'm facing an issue with displaying a very large text in a table. Despite trying various attributes such as - { text-overflow: clip; } { text-overflow: ellipsis; } { text-overflow: ellipsis-word; } { text-overflow: "---"; } { text-overflow: ellip ...

htmlcssangular

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

Concealing overflow in an SVG element with absolute positioning

Looking to hide the parts of the circle that extend beyond the shadowed container. Utilizing bootstrap-4 for this project. body { overflow: hidden; } .container { margin-top: 5%; width: 1200px; height: 625px; border-radius: 4px; background- ...

csssvgbootstrap-4

PHP code that generates a drop-down list using a foreach iteration

all I'm encountering a slight issue with trying to create a dynamic drop down list. Here's the code I've written: <select name='categoryID' > <?php foreach( $categories as $category)?> <option value="<?p ...

phphtml

Tips for creating a captivating full-screen parallax section on your website

Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...

jquerycsswebfullscreen

Retrieving a PHP variable from HTML without using a form

Is there a way to pass a variable from HTML to PHP without using a form and the traditional post or get methods? I have tried using the code provided, but I am unable to access the value of the 'buy1' variable in PHP. Is there a way to achieve th ...

javascriptphphtml

restructure the HTML based on a jQuery condition

Using jQuery to Refresh HTML Content function(data) { if(data === "importtrue") { $('#rebuildme').//function like .html } else { $('#rebu ...

phpjqueryhtml

Connect my php search outcomes to a different webpage

Hello, I am new to the world of php and I have written a search result function that allows users to click on items. However, I am facing an issue with making a specific search item clickable to open in another page with full details. Below is the code I h ...

phphtml

Convenient way for users to easily choose an icon from a vast selection of icons

I am currently working on a web application that allows users to create new categories. These categories are then inserted into a database using form post. Each category should have an icon associated with it, and I want users to be able to select the ico ...

javascripttwitter-bootstrapbootstrap-5user-friendlybootstrap-icons

What is the process for creating a progress bar in PixiJS?

Can someone guide me on creating a progress bar similar to the one in PixiJS? Screenshot ...

javascripthtmlcanvas

utilizing different types of text style

Whenever I write a paragraph, I want the text to be styled like this: Click here for alt text http://img6.imageshack.us/img6/9894/fullscreencapture282010.jpg Do I need to use CSS to achieve this kind of formatting? I'd like it to look similar. ...

javascripthtmlcss

Struggling to get the hang of CSS animation?

Here is a code snippet that I am using: //Code for animating skills on view document.addEventListener("DOMContentLoaded", function(event) { function callback(observations, observer) { observations.forEach(observation => { if (observati ...

javascripthtmlcssioscss-animations

Adjusting the transparency of one element and rotating another element that are the same size

This issue is driving me nuts: I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes: <div id="main-c ...

htmlcss

FullCalendar fails to load in Bootstrap 4 tab

My current project involves utilizing Bootstrap 4 tabs, and I encountered an issue with displaying a FullCalendar on the second tab. Specifically, I am using version 5.2.0 of the FullCalendar library. While the calendar functions correctly when placed on t ...

javascripthtmlbootstrap-4

Aligning images of varying sizes

I have implemented a PHP script that automatically resizes images proportionally to fit within a given height and width. For example, if the original picture is 200x100px and the target box is 180x180px, the resized image will be 180x90px. Although this s ...

csshtmlimagecentering