Is there a way to overlay an image and text on top of another image, similar to what is done on this website ?
Is there a way to overlay an image and text on top of another image, similar to what is done on this website ?
Tip: Try utilizing the position: relative property along with z-index. This allows you to control the layering of elements on top of each other during rendering.
Check out this demo
header {
position:relative;
width:100%;
height:400px;
background:url('http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/deep-forest-1009475.jpg')no-repeat center;
background-size:cover;
}
.img {
position:relative;
float:left;
margin:20px;
width:200px;
height:calc( 100% - 40px );
background:url('http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/silhouetted-figure-and-tree-1008861.jpg')no-repeat center;
background-size:cover;
}
.description {
position:relative;
float:left;
margin:20px 0;
width:calc( 100% - 240px);
}<header>
<div class="img"></div>
<div class="description">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor..</p>
</div>
</header>
<section>
<h1>Actual text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</section>Your example showcases a container DIV with a background image and an image nested inside it.
For a similar result, you can try the following:
HTML:
<div id="backgroundContainer">
<div id="transparentLayer">
<img src="pathToImage" />
</div>
</div>
CSS:
#backgroundContainer {
background-image: url("pathToImage");
background-size: cover;
background-repeat: no-repeat;
}
#transparentLayer {
background-color: rgba(0,0,0,0.5);
color: white;
}
The transparent layer DIV helps create a darkened overlay on the image.
There are various other methods to achieve a similar outcome.
What is the method to retrieve all data-attributes and store them in an array? <ul data-cars="ford"> <li data-model="mustang"></li> <li data-color="blue"></li> <li data-doors="5"></li> </ul> The resultin ...
I'm encountering an issue with the code block below. When attempting to make the screen responsive, the elements within the aircard div are not stacking as expected. Instead, they seem to overflow. I'm unsure of the reason for this behavior and h ...
CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...
I installed the Moving Boxes plugin and customized it to create a full-width image slider. While it works well when the page loads, I'm facing challenges with making it responsive on resize. It appears that the JS script sets fixed widths upon load, w ...
I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...
Hello everyone! I am having trouble deciding on the best approach to achieve a layout like the one below: +------------------------------------------------------------+ | div 0 , varying height +---------------------------------------------------------- ...
Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...
I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, ...
I've been using Bootstrap buttons and I decided to change the color of one. However, when I clicked the button, it still changed to blue even though I specified ".btn-primary:active". HTML: <button type="button" class="btn btn-prima ...
I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...
When you click a button with jQuery, I am generating a modal (Bootstrap modal) as a string. This modal has two option classes: Call Today and Call Tomorrow, which seems fine so far. Upon clicking the button, the modal is created, prompting me to add two a ...
I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...
Within my html/css application, I have defined a button as a class named .button with specific attributes. Here is a simplified example: .button { width: 120px; height: 30px; line-height: 30px; background: yellow; text-align: center; } <div ...
I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet: <v-row justify="center" class="ma-0 pa-0"> ...
I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...
Despite setting the CSS to .text { word-wrap : break-word; max-width: 100px}, the text is not wrapping as expected. It is still displaying in a single line. I am anticipating that the large text should wrap onto the next lines. ...
Struggling to find a way to add a hover effect to an image that is not inside a disabled element? Although it seems like the css selector below should do the trick, it doesn't quite work as expected. In this scenario, I only want the hover effect on e ...
I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...
I'm working on developing a scroll feature that operates independently from the main window's scrolling function. I aim to trigger specific events in the primary window based on interactions with this separate scrollbar. The only solution I coul ...
Looking at the code in the image, you can see that I am using MUI components. Within a section, there is a box containing navigation filter links. The red part represents the section, while the white inside is the navigation link bar. My goal is for this b ...