My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example:
I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed.
My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example:
I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed.
Check out a live demonstration here. Give this a try:
HTML:
<div>
<span>Greetings Earthlings</span><br>
<span>Additional text goes here</span>
</div>
CSS:
div {
width: 400px;
height: 400px;
background-image: url(http://www.hotels.tv/london-hotels/images/destinations/1/w97654_8.jpg);
background-repeat: no-repeat;
background-image-width: 100%;
}
div span {
font-size: 30px;
position: relative;
top: 100px;
background-color: gray;
color: white;
}
UPDATE
In this illustration, the text is justified to the lower part by using display: table-cell and vertical-align: bottom on the main element
UPDATE 2
To achieve a see-through background, employ rgba(), just like in this instance
UPDATE 3
If you want the text to be aligned to the right, apply text-align: right on the parent element, as shown in this case
You may need to make some adjustments to achieve the exact look you desire, but here is a good place to start.
<style>
#image_container {
position: relative;
background-image: url(path/to/image) no-repeat;
width: 500px;
height: 500px;
}
#image_container .title {
position: absolute;
top: 300px;
background: #000;
background: rgba(0,0,0,0.75);
color: white;
font-size: 30px;
font-weight: bold;
}
</style>
<div id="image_container">
<div class="title">
<p>Add Your Text Here</p>
</div>
</div>
HTML:
<div id="background">
<span>An Evening at the Park:</span>
<span>Finding Nemo</span>
</div>
CSS:
#background {
background: url(http://css-tricks.com/examples/TypeOverImage/images/3754004820_91a5c238a0.jpg) no-repeat;
width: 400px;
height: 300px;
}
span {
position:relative;
clear:both;
float:left;
color:#fff;
font-size:23px;
font-weight:bold;
top:150px;
margin-top:-2px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 15px;
}
If you're looking to begin, check out this helpful guide: http://jsfiddle.net/FyL6J/
Using jQuery is not a necessity for this task, but I personally find .position() quite useful.
Do you mean something similar to this example?http://jsfiddle.net/AbCDe/
To achieve this effect, one simple method is to use a png image with the desired opacity. For example, you can create a 1x1 pixel with RGB values of (0,0,0) and set the opacity to 40% for the title background. Then, apply the following CSS styling:
<style>
.image_holder
{
position: absolute;
left: 10px;
top: 10px;
}
.image_holder > img
{
position: absolute;
left: 0;
top: 0;
}
.image_title_overlay
{
position: absolute;
left: 0;
top: 120px;
background-image: url('images/black.40%opacity.1x1.png');
color: 'white';
padding: 10px 12px;
}
</style>
<div class="image_holder">
<img src="image_url.jpg"/>
<p class="image_title_overlay">A Movie in the Park: <br/>Kung Fu Panda</p>
</div>
To achieve a semi-transparent background color, I recommend using rgba values in your CSS like so:
span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}
Check out this JSFiddle example for reference.
In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...
<div class="col-xs-4 col-sm-4 col-md-4"> {{jsonData[current].profilepic}} <div ng-if=IsValidImageUrl(jsonData[current].profilepic)> <img id="pic" ng-src="{{jsonData[current].profilepic}}" alt=""/> </div> < ...
Currently, I am working with an array that looks like this: arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa'}]. However, I need to add a condition to the array. If ...
Having trouble updating styles on a JSP page using CSS. Here is the code snippet for linking: <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/Profile.css" /> Initially, the styling wo ...
In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It l ...
When you first click on the select, it displays incorrectly https://i.sstatic.net/Ax9T7j8J.png But when you click on it a second time, it displays correctly https://i.sstatic.net/UpW4krED.png $(document).on("click", "#edit_afpDetalle_mes&q ...
Greetings! Currently, I am in the process of creating a simple webpage that utilizes a map function to display all details to the user. Some fellow developers have advised me to remove my functions from the render method, as it continuously renders unneces ...
I find myself in a predicament where I need to dynamically add elements to a multidimensional array depending on a specific condition. This means that the type of element to be added will vary based on the condition. if(type == 'text-box'){ ...
Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...
I recently added a parallax effect to the hero section of my website, and while it works perfectly on desktop, I encountered some scrolling issues when viewing it on mobile or tablet devices. Sometimes the scrolling behaves as intended, and other times it ...
Is it possible for JavaScript to determine the current controller and action in Rails? I had the idea of creating a hidden container to store the current controller and action, but I'm curious if there is a specific JavaScript function for this purpo ...
Currently, I am creating a button using React, but I don't want it to have the traditional button appearance. Is there a way for me to make it a clickable div without the default button style? Below is the code I am working with: <div style={style ...
I have implemented an accordion component that currently opens and closes on click. However, I am facing an issue where clicking on one item closes another item that was previously open, which is not the behavior I desire. I'm unsure of the best appro ...
I am facing a situation where I have two input elements in a form that are closely connected. The first element triggers an ajax call to check for existing data in the database when the user tries to move away from it, while the second element opens a moda ...
Hello everyone! I'm working on a website and facing an issue where refreshing the page triggers a confirm form resubmission prompt. Could someone please advise me on how to resolve this? Thank you in advance! ...
I have integrated the bigpipe.js method into my website to display a newsfeed. It functions properly on all browsers except for Google Chrome, where it shows an 'uncaught syntaxerror unexpected token =' error. I need assistance in resolving this ...
During my time building Microsoft Excel apps using VBA, I worked with events like _Change and _Click. Transitioning to JavaScript and frameworks was a bit overwhelming due to the asynchronous nature of it all. Moving on to Python and Flask has been a ref ...
I came across this great demo tutorial that I'm currently following: The issue with the tutorial is that it loads all the images at once, which significantly impacts performance. My goal is to have it load a set of images each time you click the arro ...
In the context of my react native project, I have come across a function with an undefined name that is not being inferred. This function looks like: const f = function() {}; Despite maintaining its anonymous definition, there is an attempt to assign a na ...
I am interested in using Bootstrap datatable with AngularJS. Here is the code I have been working on: https://codepen.io/bafu2203/pen/VzBVmy Upon inspection, you will notice that when attempting to populate the table with data from a $http.get call, the t ...