CODEWITHSUNDEEP
csscss-float
Rob Bowman
Rob Bowman

Reputation: 8711

CSS div position overlay images

I have stated creating a simple MVC 4 Site which can be seen here: problem site

I would like the alternating images to appear to the right of the paragraph within the blue border.

To alternate the images I am using the authors initial JS from here: JQuery

<script type="text/javascript">
jQuery(document).ready(function() {
    $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    },
      3000);
});
</script>

The markup from my index.cshtml is as follows:

<div id="intro">
    <p>
    Don't let memories fade - preserve them for generations to come.<br />
    Yorkshire Image Scanning can create perfect digital copies of your photographs, stored on DVD or USB memory stick.
    The access the digital images simply insert into a DVD player and a slideshow will start to run. 
    Alternatively, the images can be copied to your PC, iPad, smartphone etc and backed up using any normal method such as external hard disk or DVD copies or cloud storage.
    Of course, digital images are so much easier to share than old photographs. Upload them to facebook and let distant friends share your memories!
    </p>
</div>
<div class="fadein">
    <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" />
</div>

The CSS is as follows:

#intro {
   float: left;
   width: 50%;
}

.fadein { width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

Could anyone please advise what I need to do to move the images? It seems that unless I have the .fadin img with a position:absolute then I get to see each of the images at the same time when jQuery flicks to the next image. I don't know how to set the all images to a position relative to the previous div so that each image overlays the previous?

Upvotes: 0

Views: 547

Answers (2)

Christopher Thrower
Christopher Thrower

Reputation: 730

Make your .fadein relative and float right and that should give you what you want.

EDIT: Thanks to Ilya Streltsyn You'd be better off using margin-left: auto on your .fadein div. This would prevent the parent from collapsing when using floats.

Upvotes: 2

Michael Schmidt
Michael Schmidt

Reputation: 9230

Your .fadein solution should work with position:relative;

Upvotes: 0

Related Questions