xvilo
Gebruiker
- Lid geworden
- 14 dec 2008
- Berichten
- 492
Hallo allen,
Ik heb een vraag, ik ben bezig met een portfolio site. Nu staat er op de portfolio pagina allemaal werk als "tegels" zodra je met je muis op de tegel komt zie je een overlay met wat text, html is alsvolgt
Dus als je article hovert dan ga je span zien, dit heeft de volgende CSS:
Alleen werkt het nu niet goed, als je met je muis er op gaat, gebeurt er niks, maar zodra je met je muis er afgaat, dan vliegt ie er heel eventjes voor.... Wat doe ik verkeerd?
Live example: http://experiments.xvilo.com/wordpress/
Alvast bedankt,
//xvilo
Ik heb een vraag, ik ben bezig met een portfolio site. Nu staat er op de portfolio pagina allemaal werk als "tegels" zodra je met je muis op de tegel komt zie je een overlay met wat text, html is alsvolgt
HTML:
<article class="post-31 post type-post status-publish format-standard hentry category-uncategorized" id="post-31">
<a href="http://experiments.xvilo.com/wordpress/?p=31">
<span>
<h3>test 5</h3>
<p>aksdfja sdjflkajsd flkajsd flja aaksdfja sdjflkajsd flkajsd flja aaksdfja sdjflkajsd flkajsd flja aaksdfja sdjflkajsd flkajsd flja aaksdfja sdjflkajsd flkajsd flja aaksdfja sdjflkajsd flkajsd flja a</p>
</span>
</a>
<img src="http://experiments.xvilo.com/wordpress/wp-content/uploads/2014/02/1.jpg" width="100%" />
</article>Dus als je article hovert dan ga je span zien, dit heeft de volgende CSS:
Code:
article span {
position:absolute;
z-index:2;
width:100%;
height:100%;
background:rgba(44, 62, 80,0.7);
padding:10%;
overflow:none;
opacity:0;
text-align:center;
}
article:hover span {
display:block;
opacity:1;
}
article img {
z-index:1;
}
article {
width:33.3333333333%;
float:left;
overflow:hidden;
position:relative;
height:0;
padding-bottom:33.33333333%;
}Alleen werkt het nu niet goed, als je met je muis er op gaat, gebeurt er niks, maar zodra je met je muis er afgaat, dan vliegt ie er heel eventjes voor.... Wat doe ik verkeerd?
Live example: http://experiments.xvilo.com/wordpress/
Alvast bedankt,
//xvilo
