How can I use multiple images underneath each other in CSS?

Question

This is the code:

.pictures{ width:400px; margin: 0 auto;
}

.pictures { height : 400px; background-image: url("../img/Pre-Wedding Portrait/pre-wedding1.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center; margin-top: 50px; margin-bottom: 50px; border-radius: 50%; position:relative;

}

.color_transition { background-color: rgba(0,0,0,0.4); top:0; bottom:0; left:0; right:0; border-radius: 50%; position:absolute;

I want to add multiple images here, the images must be below each other. Each image to have same effect as the first image, means dimension, fixed attachment, circle in shape with rgba effect as well. I am also using javascript on the image. So the other images to have same javascript code as my first image. I hope you understand what exactly want to do. Can anybody give the solution for this. I have been trying to do this since yesterday but not getting through it. Thanks.

Answer 1 · 2015-10-22T11:48:36Z

October 22, 2015 11:48am

I have put a quick codepen together with an example of what I think you are looking to do.

http://codepen.io/anon/pen/GpQZNp

I have used background-color so I can easily demonstrate how it works, but you can change this to background-image and use your images instead.

You can easily add more if statements and change the scroll distance for the change in the jquery.

Basically it checks to see your scroll distance from the top and depending on the distance it removes or adds classes to your element with .pictures easilly allowing you to switch classes with different backgrounds.

I have added in a 0.5s ease transition in the css as well.

You can ignore the pagesize div I just threw it in to increase the scroll distance of the codepen page for the example.

HTML

<div id="pagesize"></div>
<div id="wrap">
  <div class="pictures"></div>
</div>

CSS

#pagesize{
  height: 3000px;
  width: 100%;  
}
#wrap{
  height: 400px;
  width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
}

.pictures {
  width: 400px;  
  height: 400px;
  margin: 0 auto;
  background-color: red;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 50%;
  position: relative;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

.img1 {
  background-color: yellow;
}

.img2 {
  background-color: blue;
}

.img3 {
  background-color: green;
}

jQuery

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(document).scrollTop();

    if (scroll >= 300 && scroll < 600) {
      $(".pictures").addClass("img1");
    } else {
      $(".pictures").removeClass("img1");
    }
    if (scroll >= 600 && scroll < 900) {
      $(".pictures").addClass("img2");
    } else {
      $(".pictures").removeClass("img2");
    }
    if (scroll >= 900){
      $(".pictures").addClass("img3");
    } else {
      $(".pictures").removeClass("img3");
    }
  });
});

Answer 2 · 2015-10-22T11:26:16Z

October 22, 2015 11:26am

Do you mean like parallax effect:

Try Parallax.js

Welcome to the Treehouse Community

Looking to learn something new?

Ila Gupta

Ila Gupta

How can I use multiple images underneath each other in CSS?

2 Answers

Codin - Codesmite

Codin - Codesmite

Miguel Palau

Miguel Palau

Ila Gupta

Ila Gupta