I attempted to do something like this:
//clearfix
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.image-stack__item--top {
float: left;
width: 66%;
margin-right: -100%;
padding-top: 15%; // arbitrary
position: relative;
z-index: 1;
}
.image-stack__item--bottom {
float: right;
width: 75%;
}
Unfortunately, it did not work as expected.
There are numerous ways to approach this situation. To begin, it's crucial to grasp the fundamentals of CSS Positioning, CSS Layout (Utilizing Grid / FlexBox / Float, etc.) & CSS BoxModel.
Based on the snippet you provided, I opted for float, although flex would have been my recommended choice due to its power and flexibility.
Here is the solution I devised.
/* EMPLOYING A MOBILE-FIRST APPROACH, DEFINING STYLES FOR MOBILE FIRST */body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.image-stack {
position: relative;
}
.image-stack .bg {
position: absolute;
height: 100%;
width: 100%;
background: black;
}
.image-stack .bg>img {
opacity: .75;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-stack .image-stack__item {
position: relative;
padding: 20px 10px;
height: 100%;
}
.col-half {
padding: 0 10px;
position: relative;
height: 100%;
}
.text-format {
color: white;
margin-bottom: 30px;
}
.text-format h1 {
font-size: 3rem;
font-weight: 700;
margin: 5px 0;
}
.img-overlap {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.image-stack {
background: yellow;
height: 80vh;
margin-bottom: 60px;
}
.col-half {
width: calc(50% - 20px);
float: left;
}
.text-format {
margin-bottom: 0px;
}
.img-overlap {
position: absolute;
left: 0;
bottom: -30px;
}
}<div class="image-stack">
<div class="bg">
<img src="https://picsum.photos/id/1045/1440/400">
</div>
<div class="image-stack__item">
<div class="col-half text-format">
<p>5th Consistent Award Winning Year!</p>
<h1>Modern Design Solutions</h1>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
<a href="javascript:void(0)" class="btn">See our Projects</a>
</div>
<div class="col-half">
<img src="https://picsum.photos/id/1008/600/400" class="img-overlap" alt="Overlapping Image" />
</div>
<br clear="both" />
</div>
</div>
<div style="background: brown">
Other test
</div>I included explanatory comments within the CSS section to assist you.
Explore the CodePen Link => https://jsfiddle.net/d5urpbL2/17/
I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...
Is there a way to center align the items in a ListView without using another View wrapping the ListView? Currently, all the items are left aligned. ListView Code Snippet <ListView dataSource={this.state.dataSource} renderRow={this.renderItem} ...
When attempting to retrieve the value of my text area after submitting a form, I utilized the following command: $message = $_POST['message']; Unfortunately, this approach did not yield the desired result. This may be due to it not being an inp ...
Having an issue with adding top and side menus. The top menu is displaying above the side menu. Can someone help fix the css? Here is my fiddle. I attempted to apply #leftPanel position:fixed but it did not work as expected. ...
Using ionic to develop a hybrid app has been a smooth experience, especially with android! This is my login HTML: <body ng-app="starter"> <head> <script src="phonegap.js"></script> </head> <ion-header-ba ...
I am facing an issue with my website's contact form that is supposed to send out an email after the user fills it out and clicks submit, but it does not appear to be working. Unfortunately, I do not have access to the mail server since it is hosted e ...
Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...
I am currently working on a simple navigator component that includes buttons and a date-picker subcomponent. My goal is to be able to bind keydown.arrowleft etc. for the entire div, which has a CSS style of 100% height and width. Below is the template stru ...
Currently in the process of creating a website for my brother with Joomla 3.4 and Bootstrap. This marks my first venture into building a responsive site, so I'm seeking guidance on essential elements to include in my CSS such as font sizes in specific ...
Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...
I need to add an onclick event to a button that is being generated dynamically via ajax. How can I achieve this? This is the code responsible for generating the content. When we click on an item, I want a popup window to appear. function retrieveTableDat ...
I am exploring ways to position specific divs in the middle of the screen to create a pearl necklace-like shape. The desired shape is as follows: 0 0 0 0 0 0 0 0 0 0 My aim is to achieve this using jQuery on a mobile ...
Looking to add animation effects to specific parts of a paragraph, but transforming the entire box instead. Remembering seeing a solution on StackOverflow before, now regretting not saving it. Spent over an hour searching for a similar answer without succ ...
Hello there! I could really use your assistance with this code. I have been trying to make it work using JavaScript, but I'm determined not to incorporate any external JS files. Here is the snippet of JavaScript code I am working with: "use strict"; ...
I am currently working with Angular to develop a preferences page. Essentially, I have a field in a mysql table on my server which I want to connect my textbox to using ng-model through an asynchronous xhr request for setting and fetching data. I attempt ...
After following the instructions on Facebook's site (http://developers.facebook.com/docs/reference/plugins/like/) to add a basic like button to my website using HTML5, XFBML, and iFrame methods without success, I suspected there may be an issue with m ...
I've been searching for information on their website but can't seem to find an answer. Can you confirm if HtmlCleaner is thread safe? I have multiple threads that will be using it and I'm unsure whether reusing an instance of the HtmlCleane ...
My goal is to modify the text value of an HTML code using jQuery... <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown><span>1395</span></button> ...
I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file. /*** ...
Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...