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

user_1071329 0
Viewed 52

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>
    <a href="#" class="classname">Know More</a>
    
 
    
  </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>

enter image description here

css html
3 Answers

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>
            <a href="#" class="classname">Know More</a>
        </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>

user_109681340 

.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>
    <a href="#" class="classname">Know More</a>
    </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

user_39951260

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>
      <a href="">Button</a>
    </div>
    <div class="image">
      IMG tag goes here
    </div>
  </div>
</div>

user_49645560
Related