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..

    How to use css to set svg hover color?

    Heroku Not Showing SCSS Background Images

    how to align an element but keep the space it left reserved

    How can I make make css transition happen when applying width through javascript

    How can I get this effect (on height) with jquery?

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How to make arc-in animation on a website - CSS or JavaScript?

    webpage works well on all browsers except Android Browser, which shows fonts with increased size

    How to reset default styling of input[type=“text”]:focus in Chrome and Safari?

    How do I make effect like this on image hover?

    how to avoid the ID name in css file

    How to group CSS/Javascript button behaviour? [closed]

    How to create a div in the same size as the contained image. Both should be responsive

    How to target images with dynamically generated ids with CSS

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How is Facebook's website front-end and it's right sidebar designed?

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to make the divs fill the remaining space without using float?

    How to keep DIV from overlapping?

    How to set font style light?

    CSS how to vertical align div in a div against a sibling div (inline-block)

    How to target separated class names through css?

    How do I mask a region of the page in a responsive design using CSS?

    CSS - HTML - How to align images properly across the page

    How can I make html table columns (only the ones with text) evenly spaced

    How to decrease spacing between bootstrap glyphicons

    How to find out if the user scrolled to the end of a HTML container with jQuery?

    How to add css for specific input type text

    How to create two Tables in JavaScript and use with different CSS?