Center an image and superimpose text in the middle of the webpage

I am attempting to center an image with text overlay in the middle of a page. Although the image is centered correctly, the overlay text remains off-center. Below is the code snippet. The text should be positioned in the top left corner of the image.

<div class="w3-content">
<div class="w3-row-padding" style="text-align: center;">
    <div class="w3-display-container">
        <img src="w3images/house5.jpg" alt="House" style="width:50%;"  class="animated fadeInRight slower">
        <div class="w3-display-topleft w3-black w3-padding animated fadeInRight slower">Summer House</div>
    </div>
</div>
</div>
htmlcss

Answer №1

If you want to overlay text on top of an image, consider using the image as a background image or positioning it absolutely.

.image-wrap {
  position: relative;
  margin: 0 auto;
  width: 50%;
}
.image-wrap .text {
  position: absolute;
  top: 0;
}

https://jsfiddle.net/jymqj51r/

Answer №2

After making some adjustments, I managed to get this solution to work. Appreciate all the help!

<div class="custom-container animated fadeInRight slower custom-white "  style="align: right;">
<div class="custom-display-container" >
<div><img src="customimages/house2.jpg" ></div>
<div class="custom-display-topleft custom-black custom-padding">>My Beautiful Home</div>
</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

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

How to Implement Flexbox Display Across Various Browsers Using jQuery?

Running into an issue here. I'm trying to switch from display: none to display: flex, display: flex-box, and display: -ms-flexbox but for some reason it's causing errors in my code.. Here's what I've been working on: $(elem).css({&apos ...

javascriptjquerycssflexbox

What is the process for choosing a table column by clicking on the "select" option?

Welcome to my project! Here is an example table that I'm working on. I have a question - how can I make it so that when I click on "choose me", the entire column is selected? Can you help me with this? <table> <tr> <th>plan A&l ...

javascriptphphtmljquerydom

Creating layered images with CSS Grid

Visit this link for more details I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this: Click here to see the desired result I followed tutorials that demonstrate the same method, but unfo ...

htmlcsscss-gridphoto

Is there a method available for downloading the HTML5 attribute that functions in Internet Explorer?

Is there a method to download attribute work in Internet Explorer. When attempting to force download a file on IE using The following works flawlessly on Firefox but not on IE <a href="image.jpg" download>Click here to download</a> ...

htmldownload

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

There is a full background HTML5 video set to autoplay on my website. However, there seems to be an issue with some iOS mobile devices using Safari as the video fails to load properly at times. The error message displayed is: https://i.stack.imgur.com/D4X ...

htmlreactjsvideobackgroundhtml5-video

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

javascripthtmlnode.js

Modify the hover color of the FontAwesome span icon

Here's a span that I have: <span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span> I decided to change the color to #008d4c like this: .fa-green { color: #008d4c; } But when I try to hover over it, the color do ...

cssfont-awesome

Issue with animated cursor function not activating when used with anchor links

I've spent hours searching for a solution but I can't seem to find one. I'm attempting to modify the codepen found at https://codepen.io/Nharox/pen/akgEQm to incorporate images and links, however, two issues are arising. The first issue is t ...

javascripthtmlcssanimationcursor

Using the .slider class on concealed div elements

Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using $(document).ready(function(){ $('a').click(function () { var divname= this.name; $("#"+divname ...

jquerycss

Unable to assign attribute following discovery

Can the attribute of an anchor element that is found using find() be set? I attempted this: $(this).children('a').setAttribute("href","a link"); Although it does locate the anchor element, why am I receiving an error when trying to use setAttr ...

javascriptjqueryhtml

Centering multiple floated divs using bootstrap

Looking for some help with a bootstrap panel design. I am trying to align a heading title to the left and a select element along with a date range input to the right of the panel heading, vertically aligned in the middle. While I have made progress on this ...

htmlcsstwitter-bootstrap

Assign a class to an element depending on its position using JavaScript/jQuery

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> How can I use jQuery to add a class to the second li element in the list without using an existing class or id? ...

javascriptjqueryhtml

The validation of the form does not seem to be functioning properly when the 'required' rule is used

I have implemented the Required form validation in my input fields to prevent submission with empty data. However, it seems like my required validation is not functioning as expected. function AddCar() { const [chasis, setChasis] = useState("" ...

htmlreactjsreact-hooks

Refresh a DIV using two SQL queries in forms

I am encountering an issue with updating a single div element using the results from two different forms on an HTML page. I want either form1 or form2 to display results in the same div element, and it should be updated with one line of content fetched fro ...

javascriptphpjqueryhtmlsql

What is the reason behind a taller button when using a single line span?

Currently experiencing some strange effects with the radio buttons I'm working on. My goal is to have them all be the same size, but they are coming out different depending on whether the text within the button spans one or two lines. I've been a ...

css

Using the onclick event with an image created through PHP code

I am currently in the process of developing a dynamic image represented as a graph displaying the number of documents generated each day. This interactive image is being created using PHP, and I aim to improve user engagement by enabling them to click on t ...

phpjavascripthtmlimageonclick

Progressive zoom effect applied to an image in a JavaScript slideshow

Can someone assist me in replicating the zooming effect demonstrated in this code snippet: `http://codepen.io/docode/pen/EjyVQY`. I am specifically focusing on the zooming feature of this slideshow. How can I replicate this zooming effect in JS rather t ...

javascriptjqueryhtmlcsszooming

Unable to retrieve data from PHP using AJAX request

My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...

javascriptphphtmlajax

The functionality of jQuery Revolution Slider becomes compromised when integrated with ember.js

Initially, the jQuery Revolution Slider on the website functions properly. However, when navigating to a different route and returning to the home/index page where the slider is located, it malfunctions. <script type='text/x-handlebars' data- ...

jqueryhtmlember.jsrevolution-slider