Is it possible to add text on top of an image with a background, such as the example shown below?
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg"/>
</div>
Is it possible to add text on top of an image with a background, such as the example shown below?
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg"/>
</div>
Check out this http://codepen.io/anon/pen/jaBho
<div>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, placeat!</h4>
<img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzA4LzI0LzVkL21pbGV5ZG9nLmEzMDVjLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/1750ef37/ade/miley-dog.jpg">
</div>
div{position: relative;
margin: 35px;
width: 500px;
height: 300px;
overflow: hidden;
}
h4{
background-color: rgba(174, 0, 0, 0.51);
position: absolute;
bottom: 30px;
left: 30px;
width: 300px;
padding: 20px;
display: block;
color: white;
font-size: 24px;
}
Did you have something like this in mind when you asked about it? Check out this demo.
Key points to note:
To achieve this effect, the parent div must be styled with position: relative and the text div with position: absolute. Then you can position it over the image using top: ?; left: ?; bottom: ? and ensuring text-align: center.
Below is the HTML code:
<div id="slider">
<img src="http://www.primolo.de/archiv/BrAlIbKe/hp_bilder/luftballons2_v-gallery_1_.jpg"/>
<div id="slider-text">This is amazing</div>
</div>
And here is the accompanying CSS styles:
#slider {
position: relative;
width: 400px;
}
#slider-text {
position: absolute;
width: 200px;
color: #FFF;
font-weight: bold;
bottom: 5%;
left: 30px;
padding: 30px 0;
text-align: center;
background-color: rgba(200, 50, 0, 0.8);
}
While some of the styling may have been extra, overall it adds a nice touch to the design.
I hope this information proves helpful to you.
Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...
Having some difficulty fetching a value from an HTML5 slider using JQuery. Here is my code snippet: JQuery Code: // Getting the value from slider one $("#submit").on("click", function(evt) { var sliderValue = $('#slider01').attr('value ...
Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...
Looking at the source code of the page, you'll find something like this: <link rel="stylesheet" href="http://..."> <!-- analytics --> <script> ... Make sure the closing </head> tag and the opening <body> tag are positio ...
I am attempting to showcase a sequence of 4 divs in a row using the ease-in CSS transition feature. I came across this example that demonstrates what I am aiming for: http://jsfiddle.net/57uGQ/enter code here. However, despite my best efforts, I am unable ...
Why am I getting a "template does not exist" error in Django? I'm trying to navigate from film_detail.html to film_report.html by clicking on the "report" button... views.py class FilmReport(LoginRequiredMixin, UpdateView): model = Report fi ...
I've successfully implemented the material design ripple effect using jQuery, which functions well in IE11 and Chrome 46. However, I've encountered an issue in Firefox 39 where applying the effect to links prevents redirection. Upon investigation ...
Struggling to implement a mobile responsive menu, my primary issue is the navigation buttons not toggling upon clicking. Here's what I have so far in terms of HTML and JQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery. ...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba3bba5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0v ...
I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...
Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...
I seem to be facing an issue with creating responsive images using Bootstrap 4. Whenever I view the code below on a browser, I see three images in the navbar at the top left corner. Unfortunately, these images do not scale down in size when viewed on mobil ...
I'm facing an issue with my modal form setup where if a text-field is left blank, a label saying "it is required" is generated below the field, causing the "Proceed" button to move (along with all other elements below it). How can I make sure that DOM ...
Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...
Currently, I am working on my thesis and developing a simple browser game. My project involves having a form with three buttons that need to trigger the same action with different parameters. Here is what I have come up with so far: @using (Html.BeginForm ...
There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...
Can an input box placeholder have two different styles? Here's the design I have in mind: https://i.stack.imgur.com/7OH9A.png ...
Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...
I'm new to Jquery and JavaScript. I have a dropdown in my Keen template that displays 2 flags. I want to be able to click on the dropdown and select the corresponding flag. Most of the examples I found online use the select and options tags, but my co ...
For some reason, I am struggling to understand why this issue is occurring: In jQuery Mobile, I have an unordered list with data-inset="true". Initially, it displays perfectly with rounded top and bottom edges. However, on dynamically adding new elements t ...