Utilizing CSS/HTML to overlay two rows of text on my image

Is it possible to create two rows of text on an image? I came across a similar question that was answered, you can check it out here.

.imgHolder {
  position: relative;
}
.imgHolder span {
  position: absolute;
  right: 10px;
  top: 10px;
}
<div class="imgHolder">
  <img src="https://www.google.com/images/srpr/logo11w.png" alt=""/>
  <span>Here's the overlay text<br>Second row</span>
</div>

Although this method works well, I'm struggling to change the formatting of the second row (text size) without disrupting the text position.

I'm also confused about how the span tag functions in the external CSS file.

If you have any insights or solutions, I would greatly appreciate your help!

htmlcss

Answer №1

Here is the solution provided: https://jsfiddle.net/xwfsxkrt/

The code for the HTML section:

<div class="imgHolder">
  <img src="https://www.google.com/images/srpr/logo11w.png" />
  <span class="top">Overlay text goes here</span>
  <span class="bottom">Second row of text</span>
</div>

The CSS styling used:

.imgHolder {
  position: relative;
}
.imgHolder span.top {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color:green;
}
.imgHolder span.bottom{
  position: absolute;
  right: 10px;
  top: 30px;
  background-color:yellow;
}

It was mentioned that adding the background-color property allows for customizing the style of each row. The use of different span classes aids in distinguishing between multiple rows in the layout.

Answer №2

When using 'float:left' for the div, it will stretch over the full width of the page causing the text to float absolutely on the right side (as that is the edge of the div). By setting float:left, the div will only be as wide as its contents, making the edge of the div align with the image.

  1. To simplify positioning, place the text in a div named "textholder" instead of arranging 'spans' vertically under each other.

  2. Create separate spans with different classes/styles for the first and second rows of text.

The end result:

.imgHolder {
  position: relative;
    float: left;
}
.textholder {
    position: absolute;
    right: 10px;
    top: 10px;
}
.textholder span.top {
  font-size: 14px;
  background-color:green;
}
.textholder span.bottom{
  font-size: 10px;
  background-color:yellow;
}
<div class="imgHolder">
<img src="https://www.google.com/images/srpr/logo11w.png" />
    <div class="textholder"><span class="top">Here's the overlay text</span><br><span class="bottom">Second row</span></div>
</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

What is the best way to make a HTML link stand out by adding blinking superscript text using a custom blink effect?

Can you please help me with a code snippet to emphasize an html link by adding superscript text "new" surrounded by a circle or star symbol? I would like the "New" text in superscript to blink as well, drawing attention from users. Here is the HTML code s ...

javascriptjqueryhtmlcsshyperlink

What might be causing the invisibility of a particular div element?

Here is the layout in the div element: <div class=" wrap clear"> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block orange float"& ...

htmlcss

What could be causing the undefined status of this length function?

I need to determine the length of seconds. If the second is only one character long, I want to add a 0 in front of it. Otherwise, no action is needed. Below is my code: <p>Click the button to show the current number of seconds.</p> <p id= ...

javascriptjqueryhtmlcss

I am looking to incorporate a dropdown feature using Javascript into the web page of my Django project

According to the data type of the selected column in the first dropdown, the values displayed in the columns of the second dropdown should match those listed in the JavaScript dictionary below, please note: {{col.1}} provides details on the SQL column data ...

javascripthtmldjango-templatesdom-events

Is there a way to temporarily turn off the hover effect on a div element?

I'm in the process of designing a webpage and I've implemented a popup functionality that opens when I hover over a specific div, and closes when I move away from it. However, I now want to add a feature where clicking on the div keeps the popup ...

javascripthtmlcss

Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...

htmlcss

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

javascripthtmlvue.js

The negative z-index is causing issues with my ability to select classes using jQuery

By setting a z-index of -3 for several divs in my background, I thought they wouldn't affect the formatting of elements in the foreground. But now I'm facing an issue where I can't click on those background divs when trying to target them wi ...

javascriptjqueryhtmlcss

Sending iOS nowPlayingInfo data to web service

I am looking to create a solution for retrieving the currently active audio track on an iOS device and transmitting that data to a remote web service. Is there a way to achieve this using HTML 5 code that is compatible with Safari, or are dedicated apps d ...

iosswifthtml

Transferring information from an HTML table to a modal window, and ultimately to a PHP script

I have an index.php file where I display a table with data from a MySQL database. Each row in the table corresponds to a record in my database and has a delete button associated with it. When the delete button is clicked, I want to open a modal dialog aski ...

javascriptphpjqueryhtmlajax

Can you explain the significance of the "--" within CSS selectors?

My CSS skills are not the greatest and I stumbled upon a snippet of code that is puzzling to me. .grid-product__title.grid-product__title--body:hover { text-decoration: underline; } I checked MDN and it usually defines a reusable property, like a vari ...

htmlcsscss-selectors

Is there a way to import only the Tailwind directives on a single page in Next.js?

Looking to incorporate Tailwind CSS in a specific page of a next.js project. How can I import the Tailwind directives @tailwind base; @tailwind components; @tailwind utilities;, without impacting the styling of all other pages? ...

cssnext.jstailwind-css

CSS vertical text not functional as expected

Trying to make some text vertical, here is the CSS I'm using: h2.verticle{ color:#1a6455; border:0px solid red; writing-mode:tb-rl; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform:rotate(90deg); -moz-transform:rota ...

css

JQuery Fails to Trigger While Navigating Between Pages with React Router <Link>

When navigating from my home page to the product page, I am encountering an issue with my hamburger button. It appears as though it is clicked but does not open up the menu. However, if I refresh the page, the button works again. Strangely, after refreshin ...

javascripthtmlcssreactjsbootstrap-4

What is the best way to retrieve the user input from a prompt() function within a JavaScript function?

My goal is to capture a string input from a user and then display it as part of the output when a specific function is executed later in my code. However, instead of showing the user-input string, the output simply displays "undefined". Here is an abridge ...

javascripthtmlfunctionobject

What is the best way to incorporate CSS styles into a PHP loop?

Struggling to implement CSS styles on a PHP loop: <h3 class='title'></h3> The CSS style doesn't seem to be taking effect: .title{ color : red; } I attempted surrounding the echo with <?php ?> tags and then applying ...

phphtmlcss

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

javascripthtmlcssurl

Guide on sending a local PDF file to a separate device through a PHP web page

Looking to access a local file in a different location (e.g. F: folder.pdf or a network address like 55.22.33.33 folder.pdf). Typically, to open a file or view a page <a href=”link”> open </a> I also attempted: <a href=”file///F:&bs ...

phphtmlhreflocal-files

The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

After experimenting with the viewport meta tag and enclosing it in a div class="container", I found that the issue persists on Codeply and Chrome DevTools. However, when I adjust my browser size, the problem seems to disappear. I also tried using various v ...

cssbootstrap-4viewportbootstrap-5bootstrap-grid

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox