I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two.
Is there a feature like a "wrap-through" function that can help in such cases?
styles
#section0 .home{
opacity: 0;
}
#section0 .fecha{
left: 130%;
position: relative;
}
#section0 .pray{
left: 50%;
bottom: 80%;
position: relative;
}
function
$(document).ready(function() {
var pepe = $.fn.fullpage({
slidesNavigation: true,
slidesNavPosition: 'top',
slidesColor: ['#000000', '#000000', '#000000', '#000000', '#000000', '#000000'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', '5thPage', 'lastPage'],
menu: '#menu',
css3: true,
//animation on first page
afterRender: function(){
$('#section0').find('.fecha').delay(100).animate({left: '-60%', bottom: '-3%'}, 3000, 'easeOutExpo');
$('#section0').find('.pray').delay(100).animate({left: '0%', bottom: '28%'}, 3000, 'easeOutExpo');
$('#section0').find('.home').fadeTo( "slow" , 1, function() {});
},
html
<div class="pray">
<img src="CIMA/Home_pray.png" alt="Cool" style="z-index: '0', overflow: 'hidden', left: '4%', bottom: '32%'" height="40%" width="40%" />
</div>