Ginu C Plathottam Ginu C Plathottam - 2 months ago 20
HTML Question

How to create image queue effect using CSS3, jQuery, and HTML?

How to create this effect using CSS, jQuery, and HTML?

enter image description here

Answer

I got some free time at job, so here's an example of what you are looking for (jsFiddle):

[-] html

<div class="wrapper">
    <div class="container">
        <img src="http://pipsum.com/200x150.jpg">
    </div>
    <div class="container">
        <img src="http://placekitten.com/200/150">
    </div>
</div>

[-] js

$('img', '.container').each(function(){
    var $this = $(this);
    $this.clone().addClass('top').insertBefore($this);
    $this.clone().addClass('mid').insertBefore($this);
    $this.addClass('bot');
});

[-] css

body { background: black; padding: 20px; }
.container { position: relative; display: inline-block; margin-right: 20px; width: 200px; }
.container img { display: block; border-radius: 6px 6px 0 0; }

.container img.top,
.container img.mid,
.container img.bot { position: absolute; margin: auto; left: 0; right: 0; }

.container img.top,
.container img.mid { -webkit-filter: blur(.2px); }

.container img.top { opacity: .8; width: 80%; z-index: 0; -webkit-filter: brightness(80%); }
.container img.mid { top: 10px; opacity: .5; width: 90%; z-index: 1; }
.container img.bot { top: 20px; z-index: 2; }

And remember: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Comments