I am trying to overlay text on an image and ensure that it is centered perfectly on the image. Below is the HTML code I am using:
<div class="cloud d-flex justify-content-center">
<div class=" col-md-4 col-xs-6 col-sm-6">
<img src="./img/CloudB.png" class="img-fluid ">
<p id="exp">EXPLORE YOUR LANGUAGE </p>
</div>
</div>
<div>
<div class='mysterious'>
<img src="./img/CloudB.png" class="img-fluid ">
<p id="secret">DISCOVER THE UNKNOWN</p>
</div>
</div>
in styles.css::
.mysterious{
position:relative;
}
img{
height: 100%;
width: 100%;
opacity: 0.8;
}
#secret{
position:absolute;
left: 50%;
top: 50%;
}
You're all set. I removed unnecessary inline attributes for a cleaner code.
brief note
implement position:relative; on the image and apply position:absolute; along with a directional attribute such as left or right, or alternatively utilize transform for image transformation.
Currently, I am working on a web development project to enhance my skills. I am looking to incorporate a feature that changes the color of a clicked cell to a specific color. For a demonstration, you can view this link: https://jsfiddle.net/pz6tc3ae/30/ T ...
I'm currently facing an issue while attempting to delete an event from my Google Calendar. An error keeps popping up indicating that the webdriver is unable to locate the element. Here's an image of the problematic element. Exception has occurred ...
Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...
I recently followed a tutorial on "Overlapping Tabs" for a WordPress project and found it to be quite helpful and functional. The tutorial can be viewed at After implementing the tabs from the tutorial, I decided to add dropdown submenus to enhance the fu ...
I am encountering a slight issue while working on creating a table using Datatable and Bootstrap 4. Everything seems to be functioning well, but I have hit a snag. I am attempting to add a totalizer so that the sum of one or more columns is displayed at th ...
Within this table, there are three images: one on the left, one at the top center, and one on the right. The row for the image at the top center is set to 126px, however, the actual content image size is only 122px. I attempted to use overflow: hidden and ...
My webpage contains numerous div elements with the class line, each containing a strong.datum element. I want to designate the first and last element of each sequence with the class .active. If this can't be achieved using CSS, is there a way to accom ...
Below is the HTML file I am working with: <div id="preview_updated_notifications"> {% for lst in unread_list %} <div > <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id" ...
While developing a website using Flask and Bootstrap, I encountered an issue with displaying long lists of objects on the page. With a 6 column layout, I wanted the list to spill over to the next column seamlessly. Although I initially thought I had to han ...
I am currently testing the functionality of submitting a form using ajax. The script I have in place is designed to echo some plain text in processform.php. However, when I click on the submit button, no alert is displayed and the page is reloaded instead. ...
Currently, the script is capable of calculating the width of the script based on user input and can also determine the width of a string. However, I am facing an issue when attempting to repeat a string entered by the user. For example, if the user input ...
Whenever I enter a URL into a text input and press enter, my objective is to have the URL open in an iframe. However, some websites produce an error when trying to do so. Is there a method to successfully display a web page in an iframe? Error message: Th ...
I am facing an issue with my Bootstrap 4 buttons. I have set them up to be 4 columns each within a grid, expecting them to all remain on the same row. However, the third button is dropping down to the next line and I can't seem to figure out why. Her ...
Currently, I am in the process of customizing the styles for an ASP.Net Core 2.2 Angular SPA. Upon examination, I noticed that a specific file webpack:///./node_modules/bootstrap/scss/_reboot.scss is being generated at runtime. To take control of the styl ...
article.uk{ background-image: url("GB_Flag.jpg"); background-color: #95a5a6; background-repeat: no-repeat; background-position: right top; width: 75%; background-size: contain; color:#d98880; } <a href="GB.html" target="Great_Britain_Page"> < ...
After creating an HTML page containing a series of list items, I wanted to implement a feature where clicking a button would read the data within the list and perform a transformation. I came across an example similar to this on Stack Overflow. However, t ...
Once the Set tag/status button on the left is clicked, I aim to display a card similar to this one on the right side. What would be the best approach to achieve this in React? Should I use regular CSS, Material UI, or React-bootstrap? https://i.stack.img ...
Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...
Struggling with some school work and facing a challenge. I need the menu to be centered, but it's not cooperating. My teacher was no help, so I'm turning to this website for assistance. This is what I have come up with: * { background-col ...
<body class="container-fluid"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>Body Temperature</h3> </div> <div class="panel-body"> <p>Your body temperature is hig ...