I am attempting to create a responsive layout, but I am encountering an issue where the images are appearing in the foreground. I have tried using background position cover, but it did not solve the problem. Additionally, I am unable to use any Javascript for this task.
For reference, here is the fiddle link:
Below is the HTML code:
<div class="page-wrap">
<h1>Making This Responsive</h1>
<p>While maintaining the hierarchy of importance.</p>
<article class="main-story">
<img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking" />
<div class="story-intro">
<h1>Most Important Story</h1>
<p>This article carries the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a>
</p>
</div>
</article>
<section class="sub-stories">
<article class="sub-story">
<img src="http://placekitten.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story holds less visual weight.</p>
</div>
</article>
<article class="sub-story">
<img src="http://placecage.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story holds less visual weight.</p>
</div>
</article>
<article class="sub-story last">
<img src="http://placebear.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story holds less visual weight.</p>
</div>
</article>
</section>
</div>
And here is the CSS code:
* {
box-sizing: border-box;
}
.page-wrap {
width: auto;
margin: 20px auto;
}
.main-story {
position: relative;
margin: 0 0 25px 0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: lightblue;
}
.story-intro {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.75);
padding: 20px;
color: white;
}
h1 {
font-size: 4em;
}
h1, h2 {
margin: 0 0 10px 0;
}
.story-intro h1 {
font-size: 2.5em;
}
.story-intro p {
margin: 0;
}
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
}
.sub-story {
float: left;
width: 250px;
margin-right: 25px;
position: relative;
font-size: 80%;
}
.last {
margin-right: 0;
}
Thank you for your help!