CSS3 slider rearrange the image location

Question

I'm working on the parallax CSS3 slider http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

I am trying to rearrange the image location but am facing the problem like i can’t find the position given to the image from the left or right. Do you have any idea how to move easy the image from the left or right?

Here is the CSS3 code:

.da-slider{
    width: 100%;
    min-width: 520px;
    height: 768px; /*400px;*/
    position: relative;
    overflow: hidden;
    background: transparent url(../images/waves.gif) repeat 0% 0%;
    border-top: 8px solid #efc34a;
    border-bottom: 8px solid #efc34a;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
    -moz-transition: background-position 1.4s ease-in-out 0.3s;
    -o-transition: background-position 1.4s ease-in-out 0.3s;
    -ms-transition: background-position 1.4s ease-in-out 0.3s;
    transition: background-position 1.4s ease-in-out 0.3s;
}
.da-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
    left: 10%;
    opacity: 1;
}
.da-slider-fb .da-slide .da-img{
    left: 60%;
    opacity: 1;
}
.da-slide h2{
    color: #fff;
    font-size: 66px;
    width: 50%;
    top: 60px;
    white-space: nowrap;
    z-index: 10;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 700;
}
.da-slide p{
    width: 45%;
    top: 155px;
    color: #916c05;
    font-size: 18px;
    line-height: 26px;
    height: 80px;
    overflow: hidden;
    font-style: italic;
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
}
.da-slide .da-img{
    text-align: center;
    width: 30%;
    top: 200px;
    height: 256px;
    line-height: 320px; /*60%*/
    position: absolute;
    right: 0px;
}
.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
    left: 10%;
    opacity: 1;
}
.da-slide-current .da-img{
    left: 60%;
    opacity: 1;
}

The HTML is:

<div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Easy management</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/2.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Revolution</h2>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/3.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Warm welcome</h2>
                    <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/1.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Quality Control</h2>
                    <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/4.png" alt="image01" /></div>
                </div>
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
        </div>

Answer 1

If by "trying to rearrange the image location" you mean to animate it or change the way it animates, you should take a look at those css classes:

.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft

As you can see from the link posted in your question, those classes contain an animation CSS3 style. This is used to call a @keyframes CSS3 animation that is the fastest you can get in most scenarios.

So to change the animation, update the left position in the @keyframes animation.

Ex:

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0;}
    100%{ left: 10%; opacity: 1;}
}

to

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; top: 0%;}
    100%{ left: 10%; opacity: 1; top: 15%; }
}

Edit:

Try adding this class at the end of the style.css

.da-slide-current .da-img{
    top:20px;
    left:10px;
}

Edit 2:

The jQuery way

$('.da-img').css({ top: '10px', left: '10px' });