2016-09-06 12 views
0

CSS、jQuery、およびHTMLを使用してこのエフェクトを作成するにはどうすればよいですか?CSS3、jQuery、およびHTMLを使用してイメージキューエフェクトを作成する方法は?

enter image description here

+1

'CSSのfilter'がお手伝いします - https://developer.mozilla.org/en-US/docs/Web/CSS/filter – kosmos

+0

btwこれまでに何を試しましたか?うまくいっているのですか? – kosmos

+0

いいえ..私はCSSフィルタでの実務経験がありません。 ( –

答えて

1

私はあなたが(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; } 

と覚えている:https://developer.mozilla.org/en-US/docs/Web/CSS/filter

関連する問題