2017-06-21 10 views
0

を置く私はdivのホバーでリンクと効果

<div id="container"> 
<div class="imgContainer"> 
<div class="ar-image"> 
    <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div> 
     <p class="descfirst">Progressive</p> 
     <div class="first"><span class = "green" style="width: 85%"></span></div> 
     <p class="descsecond">Happy</p> 
     <div class="second"><span class = "green" style="width: 55%"></span></div> 
     <p class="descthird">Creative</p> 
     <div class="third"><span class = "green" style="width: 43%"></span></div> 
     <p class="descfourth">Slow</p> 
     <div class="fourth"><span class = "red" style="width: 75%"></span></div> 
     <p class="descfifth">Boring</p> 
     <div class="fifth"><span class = "red" style="width: 65%"></span></div> 
     <p class="descsixth">Text</p> 
     <div class="sixth"><span class = "red" style="width: 60%"></span></div> 


     <h1 class="topleft">1 | Scooter</h1> 
     <h3 class="topright">Rock</h3> 
     <h3 class="bottomleft">T 21%, C 6%</h3> 
     <h3 class="bottomright">XXX</h3> 
</div> 
<div class="ar-image"> 
    <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div> 
     <p class="descfirst">Progressive</p> 
     <div class="first"><span class = "green" style="width: 85%"></span></div> 
     <p class="descsecond">Happy</p> 
     <div class="second"><span class = "green" style="width: 55%"></span></div> 
     <p class="descthird">Creative</p> 
     <div class="third"><span class = "green" style="width: 43%"></span></div> 
     <p class="descfourth">Slow</p> 
     <div class="fourth"><span class = "red" style="width: 75%"></span></div> 
     <p class="descfifth">Boring</p> 
     <div class="fifth"><span class = "red" style="width: 65%"></span></div> 
     <p class="descsixth">Text</p> 
     <div class="sixth"><span class = "red" style="width: 60%"></span></div> 
     <h1 class="topleft">1 | Scooter</h1> 
     <h3 class="topright">Rock</h3> 
     <h3 class="bottomleft">T 21%, C 6%</h3> 
     <h3 class="bottomright">XXX</h3> 
</div> 
<div class="ar-image"> 
    <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div> 
     <p class="descfirst">Progressive</p> 
     <div class="first"><span class = "green" style="width: 85%"></span></div> 
     <p class="descsecond">Happy</p> 
     <div class="second"><span class = "green" style="width: 55%"></span></div> 
     <p class="descthird">Creative</p> 
     <div class="third"><span class = "green" style="width: 43%"></span></div> 
     <p class="descfourth">Slow</p> 
     <div class="fourth"><span class = "red" style="width: 75%"></span></div> 
     <p class="descfifth">Boring</p> 
     <div class="fifth"><span class = "red" style="width: 65%"></span></div> 
     <p class="descsixth">Text</p> 
     <div class="sixth"><span class = "red" style="width: 60%"></span></div> 
     <h1 class="topleft">3 | ABBA</h1> 
     <h3 class="topright">Rock</h3> 
     <h3 class="bottomleft">T 21%, C 6%</h3> 
     <h3 class="bottomright">XXX</h3> 
</div> 


</div> 

.article-image{ 
    height: 320px; 
    width: 480px; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.ar-image:hover .article-image{ 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .1s ease-in-out; 
} 

.ar-image{ 
    position: relative; 
    display:inline-block; 
    padding: 1%; 
    width: 25.66%; 

} 

.ar-image > p{ 
    display: none; 
} 


.ar-image:hover > p{ 
    position: absolute; 
    top: 0; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
    line-height:150px; 
    margin:0; 
} 

.ar-image > p.descfirst, p.descsecond, p.descthird, p.descfourth, p.descfifth, p.descsixth{ 
    display: none; 
} 

.ar-image:hover > p.descfirst{ 
    position: absolute; 
    top: 40px; 
    left: 40px; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
    transition: .4s ease-in-out; 
    line-height:25px; 
    margin:0; 
} 

.ar-image:hover > p.descsecond{ 
    position: absolute; 
    top: 80px; 
    left: 40px; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
    transition: .4s ease-in-out; 
    line-height:25px; 
    margin:0; 
} 

.ar-image:hover > p.descthird{ 
    position: absolute; 
    top: 120px; 
    left: 40px; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
    transition: .4s ease-in-out; 
    line-height:25px; 
    margin:0; 
} 

.ar-image:hover > p.descfourth{ 
    position: absolute; 
    top: 200px; 
    left: 40px; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
    transition: .4s ease-in-out; 
    line-height:25px; 
    margin:0; 
} 

.ar-image:hover > p.descfifth{ 
    position: absolute; 
    top: 240px; 
    left: 40px; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
    transition: .4s ease-in-out; 
    line-height:25px; 
    margin:0; 
} 

.ar-image:hover > p.descsixth{ 
    position: absolute; 
    top: 280px; 
    left: 40px; 
    display: block; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: bold; 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
    transition: .4s ease-in-out; 
    line-height:25px; 
    margin:0; 
} 


.ar-image > div.first, div.second, div.third, div.fourth, div.fifth, div.sixth{ 
    display: none; 
} 


.ar-image:hover > div.first{ 
    position: absolute; 
    top: 40px; 
    left: 200px; 
    display: block; 
    height: 25px; /* Can be anything */ 
    background-color: rgba(85,85,85,0.4); 
    bottom: 20px; 
    right: -40px; 
    width: 45%; 
} 

.ar-image:hover > div.second{ 
    position: absolute; 
    top: 80px; 
    left: 200px; 
    display: block; 
    height: 25px; /* Can be anything */ 
    position: absolute; 
    background-color: rgba(85,85,85,0.4); 
    bottom: 20px; 
    right: -40px; 
    width: 45%; 
} 

.ar-image:hover > div.third{ 
    position: absolute; 
    top: 120px; 
    left: 200px; 
    display: block; 
    height: 25px; /* Can be anything */ 
    position: absolute; 
    background-color: rgba(85,85,85,0.4); 
    bottom: 20px; 
    right: -40px; 
    width: 45%; 
} 

.ar-image:hover > div.fourth{ 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    display: block; 
    height: 25px; /* Can be anything */ 
    position: absolute; 
    background-color: rgba(85,85,85,0.4); 
    bottom: 20px; 
    right: -40px; 
    width: 45%; 
} 

.ar-image:hover > div.fifth{ 
    position: absolute; 
    top: 240px; 
    left: 200px; 
    display: block; 
    height: 25px; /* Can be anything */ 
    position: absolute; 
    background-color: rgba(85,85,85,0.4); 
    bottom: 20px; 
    right: -40px; 
    width: 45%; 
} 

.ar-image:hover > div.sixth{ 
    position: absolute; 
    top: 280px; 
    left: 200px; 
    display: block; 
    height: 25px; /* Can be anything */ 
    position: absolute; 
    background-color: rgba(85,85,85,0.4); 
    bottom: 20px; 
    right: -40px; 
    width: 45%; 
} 



.ar-image > div > span.green{ 
    display: block; 
    height: 100%; 

    background-color: rgb(43,194,83); 

    position: relative; 
    overflow: hidden; 
} 


.ar-image > div > span.red{ 
    display: block; 
    height: 100%; 

    background-color: #ff4742; 
    position: relative; 
    overflow: hidden; 
} 







.ar-image > h1.topleft{ 
    display: visible; 
    position: absolute; 
    text-align: left; 
    color: #ffffff; 
    top: 15px; 
    right: -40px; 
    width: 100%; 
} 

.ar-image:hover > h1.topleft{ 
    display: none; 

} 

.ar-image > h3.bottomleft{ 
    display: visible; 
    position: absolute; 
    text-align: left; 
    color: #ffffff; 
    bottom: 20px; 
    right: -40px; 
    width: 100%; 
} 

.ar-image:hover > h3.bottomleft{ 
    display: none; 

} 


.ar-image > h3.bottomright{ 
    visibility:visible; 
    position: absolute; 
    text-align: left; 
    color: #ffffff; 
    bottom: 20px; 
    left: 440px; 
    width: 100%; 
} 

.ar-image:hover > h3.bottomright{ 
    display: none; 

} 

.ar-image > h3.topright{ 
    visibility:visible; 
    position: absolute; 
    text-align: left; 
    color: #ffffff; 
    top: 15px; 
    left: 440px; 
    width: 100%; 
} 

.ar-image:hover > h3.topright{ 
    display: none; 

} 

の次のグリッドを持っているイメージがぼやけますとCSSのプログレスバーのセットが重ねられています。また、divのそれぞれにリンクがあることを望みますが、これまでホバー効果を損なうことなくこれを実装するには失敗しました。 Before HoverAfter hover

リンクが全体のdivのために実施することができる方法を任意の提案(inkl。と)?私はそれがeffektホバーをbreajs ATAGで全体のdivをラップ

UPDATE enter image description here

答えて

1

だけしようと、タグ付きラッピングAR-イメージが動作しているようです。私はあなたの質問を理解していないかもしれません。

+0

タグにdivをラップすると、ホバー効果が壊れます。基本的には、画像を別のページにリンクするだけでなく、画像上にオーバーレイされるdiv/spanにもリンクしたいと思います。 おそらく、私はそれ以上のものをリンクでオーバーレイする必要があります。私の更新されたquestinをイメージで見るタグがサイトをどのように壊すか – Jan

+0

イメージオーバーレイを行う一般的な方法であるafter pseudo要素を調べることができます。こちらをご覧ください:https://stackoverflow.com/questions/22420162/image-overlay-using-after-pseudo-element#22420195 –

+0

提案をいただきありがとうございます。ホバー上に画像がオーバーレイされますが、他のdiv/spanの背後にあるため、カスタムリンクを設定することはできません。その他の提案。 私は要素divをすべてラップしようとしましたが、これはatagでスパンしましたが、これはプログレスバーのスパンをリンクに変えず、本当に面倒です...他のアイデアは? – Jan

関連する問題