フレックススライダのオーバーレイを表示するサムのホバー

Question

フレックススライダ（http://flexslider.woothemes.com/thumbnail-controlnav.html）をカスタマイズしようとすると、ユーザーがナビゲーションサムネイルを表示してアイコンのオーバーレイを表示するようになります。 flexslider jsのコード私を編集して、このhttp://callmenick.com/_development/image-overlay-hover-effects/

ような何かが

<div class="thumb_overlay"></div><img src="'+s.attr("data-thumb")+'"'+c+"/>":'<a href="#">'+t+"</a>" 

div要素を追加するために管理しますが、私は相対的な位置

http://jsfiddle.net/livewirerules/r4uthech/1/

を設定するものの、画像の上に移動しcouldntの助けを歓迎します

ありがとう

Answer 1

ちょうどあなたのCSSに以下を追加：

.flex-control-nav li{ 
    position: relative; 
} 
.flex-control-nav li img{ 
    position: relative; 
    z-index: 2; 
} 
.flex-control-nav li:hover img{ 
    opacity: .5; 
} 
.flex-control-nav li::after{ 
    display: block; 
    content: " "; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 100%; 
    background-color: rgba(0, 0, 0, 0.8); 
    background-image: url(//i.imgur.com/xMS5K4O.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 40px; 
    z-index: 1; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 
.flex-control-nav li:hover::after{ 
    top: 0; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

ご希望の場合は、ここにあなたのフィドルが更新されます

http://jsfiddle.net/r4uthech/2/

私は、これはあなたを助けることができると思います。 :)