How to add an image on right side of the below demo? - html

Question

I have found an awesome HTML and CSS stacked card article in CSS-tricks. In that demo there is no image, but I want to add an image on the right side of the card in the below code, attached an image for reference. I have tried with all my knowledge but I couldn't make it look like in the image I have attached. Could anyone please help me?
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
<div class="wrapper">
<div class="card1">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>

Answer 1

I made two DIV elements .image and .left (You will find them at the bottom of CSS) that position the content and the photo
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1,
.card2,
.card3,
.card4,
.card5,
.card6,
.card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1 {
background-color: #CAC5F5;
}
.card2 {
background-color: #C0FFD6
}
.card3 {
background-color: #FCF4B0
}
.card4 {
background-color: #FFB1B0
}
.card5 {
background-color: #8AC9FF
}
.classname {
background-color: #44c767;
text-indent: 0;
display: inline-block;
color: #ffffff;
font-size: 15px;
font-style: normal;
height: 50px;
line-height: 50px;
width: 140px;
text-decoration: none;
text-align: center;
}
.classname:hover {
background-color: #5cbf2a;
}
.classname:active {
position: relative;
top: 1px;
}
.left {
position: relative;
margin-right: 50%;
}
.image {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 50%;
overflow: hidden;
border-radius: 0 10px 10px 0;
}
<div class="wrapper">
<div class="card1">
<div class="left">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
Know More
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card2">
<div class="left">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card3">
<div class="left">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card4">
<div class="left">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card5">
<div class="left">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
</div>

Answer 2

.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="wrapper">
<div class="card1">
<div class="column">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="column">
<img src="http://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg" alt="Girl in a jacket" width="250" height="300">
</div>
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
Please check the Snipped just added code to divide div in 2 columns

Answer 3

Maybe utilize flex and some align-items to attain the centering effect.
.image-box-wrap
{ background-color: Black;
padding: 20px;
}
.image-box
{ background-color: White;
display: flex;
justify-content: space-between;
}
.image-box > *
{ display: flex;
flex-direction: column;
justify-content: center;
}
.image-box .text
{ flex: 1 1 0%;
box-sizing: border-box;
padding: 1em;
align-items: flex-start;
}
.image-box .text a
{ background-color: Orange;
padding: 10px;
color: White;
text-decoration: none;
}
.image-box .image
{ background-color: Teal;
width: 40%;
height: 240px;
}
.image-box .image img
{ display: block;
width: 100%;
}
<div class="image-box-wrap">
<div class="image-box">
<div class="text">
<h2>Card One</h2>
<p>Text goes here... (if you have a bunch of text, you'll attain the sticky positioning where the image follows along with the text that you had in your example as the page scrolls down)</p>
Button
</div>
<div class="image">
IMG tag goes here
</div>
</div>
</div>