Ginu C Plathottam Ginu C Plathottam - 1 year ago 142
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 Source

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="">
    <div class="container">
        <img src="">

[-] js

$('img', '.container').each(function(){
    var $this = $(this);

[-] 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.mid,
.container { position: absolute; margin: auto; left: 0; right: 0; }

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

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

And remember:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download