Creating dynamic text overlay on images using CSS with adjustable position

I have a collection of 11 divs, with 8 containing images and 3 displaying ':'.

https://i.sstatic.net/Vfljg.png

All 11 boxes are enclosed within a class called "timer", structured as shown below:

<div class="timer">
  <div><img></div>
  <div><img></div>
  <div>:</div>
</div>

To overlay text on the image, I used p tags within each div and implemented the following CSS code:

.text{
position: absolute;
left: 85px;
top: 185px;
}

However, when resizing the window, only the boxes move while the text remains static. How can I ensure that the text moves along with the boxes?

Answer №1

There are a couple of elements missing here:

<div>:</div>
should be updated to:
<div class="text">:</div>
so that your CSS targeting .text can affect this specific div with the :.

Additionally, in order for the container to contain the absolutely positioned element, you must designate your timer as having a relative position:

.timer { position: relative; }

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

Customizing Bootstrap CSS

In my recent code, I included a bootstrap css reference in this manner: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T ...

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The ...

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

Organize the columns and rows of a table using an array in PHP

I am using dompdf to generate my pdf document. Currently, I am facing a scenario where I need to create a table based on two queries from the database. Both of these queries return arrays. The first array contains 28 elements, while the second array cont ...

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

Comparison of single-line and multi-line CSS styles placement

There seems to be a debate among CSS developers regarding the preference for multi-line or single-line formatting. Some argue that multi-line is favored for its ease in finding specific properties within the CSS file. However, others believe that single- ...

The animation in Material UI does not smoothly transition with the webkit scrollbar

I've been experimenting with CSS animations in Material UI's sx property to achieve a webkit scrollbar that eases in and out. However, instead of the desired effect, the scrollbar appears and disappears instantly. Whether I define the keyframes ...

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

Initiating a Page with Dynamic Modal Window according to Backend Exigencies

Dear experts, can you help me with a problem? I want to implement a modal window on an vb.aspx page if a specific condition from the codebehind query is true. How can I achieve this? Thank you! ...

Transform HTML content into a PDF document with page breaks

Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

<div id="invite_popup"> </div> $(".invite_button2").click(function(){ var file_id = $(this).data("id"); //alert(file_id); var popup2 ='< ...

What could be the reason for the content of my navBar not showing up?

Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover. Within the head tag, the following scripts are included: <!--Jquery--> <script type="text ...

Stop unnecessary re-rendering of controlled React inputs

Recently, I delved into the world of React.js and came across controlled inputs. Sample Code: Check out my simple implementation: import React, { useState } from 'react'; const MyForm = () => { console.log('rendered'); // Li ...

Ways to determine if a list is empty with thymeleaf?

<div th:if="${tblUserList != null}"> --content-- </div> I'm having some trouble with the thymeleaf code provided above. The variable tblUserList is a list, and I need to check if it is empty instead of just checking if it is null. How ca ...

Is there a way to obtain a comprehensive list of zip codes that are traversed by your route directions?

I have been searching through the Google Maps API (both Android and Web) but have not come across any references on how to retrieve a list of all the zip codes that are traversed by a given driving route. Could it be possible that I am missing something, ...

Adjust text size within a div when hovering over it

I have a div with many elements inside. When the user hovers over the div, I want to increase the font size within that specific div. Here is the HTML code structure: <div class="col-sm-5 home-grid-2x"> <div class="home-grid-2 ...

Can I access properties from the index.html file within the Vue.js mount element?

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="widt ...

A guide to creating gradient borders using CSS

Does anyone have advice on applying a gradient to a border in CSS? I attempted using the following code: border-color: -moz-linear-gradient(top, #555555, #111111); Unfortunately, it did not work as expected. Can someone share the correct method for creat ...

"Enhancing user input with a blend of material design and bootstrap-

I'm currently developing a Vue web application and utilizing bootstrap-4 as my CSS framework. I'm aiming to achieve input fields that resemble material design. However, Bootstrap offers only the older style of input fields with borders on all sid ...