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


Tags: jquery,html,image,css3

Problem :

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

enter image description here



Solution :

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


    CSS Howto..

    CSS / Javascript: hidden div does not take full width after being shown

    how to keep the css style after inserting a row to table by jquery

    How to use Font Awesome for checkboxes etc

    How to make header/body/footer 'popup' div with variable height body?

    How to change the scroll-bar style in css [duplicate]

    how to set part of circle as background in css

    How can I add a css property to the first div with a specific class name?

    How to render a template with dynamic CSS?

    How to specify a flex item to be of certain minimum width?

    Jquery datepicker only year and month how to set CSS to hide calendar when there are severals datepickers?

    how to blur the background image only in css

    How to create an integrated row in the table?

    CSS: How to clear line-through for an element in a table row?

    how to keep conditional CSS statements for internet explorer in Express (Node.js) template

    How to write css for a color when you only know the color in the RGB format [duplicate]

    WebPack how to put all css files into one css file

    How to find and delete specific row in blogger css with span tag?

    How do I make these HTML blocks of info stay the same size?

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    How to center an item inside of a DIV

    What is cufon and canvas and how to overwrite them

    How to make agile layout?

    How can I make a similar shape to a parallelogram in css?

    How to increase a CSS value by the value of a JS variable?

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    How to align multiple columns in bootstrap 3 carousel?

    how to change some css Properties according to text length

    Bootstrap with custom css how to align text vertically?

    how to make a span hold its position from an encroaching div

    How to move the icon / button outside the textbox x-webkit-speech?