Ciao a tutti,
ho un problema che non riesco a risolvere da giorni.
Utilizzando flexbox devo ottenere --> un testo che compare sopra un'immagine con l'effetto hover escluso il titolo.
Purtroppo questo hover prende anche il titolo. Nb ho provato con :not ma non funziona, sicuramente devo creare un div ma non so come.
poi altri <div class="row1home"><span class="ti">TITOLO</span>
ecc......
CSS
ho un problema che non riesco a risolvere da giorni.
Utilizzando flexbox devo ottenere --> un testo che compare sopra un'immagine con l'effetto hover escluso il titolo.
Purtroppo questo hover prende anche il titolo. Nb ho provato con :not ma non funziona, sicuramente devo creare un div ma non so come.
HTML:
[code]<div class="conthome">
<div class="row1home"><h2>TITOLO</h2>
<img src="http://www.sailcoolroute.eu/wp-content/gallery/gallery/cool-route-img-5.jpg">
<a class="overlayText">
DESCRIPTION..
</a>
</div>
poi altri <div class="row1home"><span class="ti">TITOLO</span>
ecc......
CSS
Codice:
.conthome {
display: flex;
flex-flow: wrap;
flex-direction: row;
justify-content: space-between;
padding-left: 80px;
padding-right: 80px;
text-align: center;
margin-bottom:50px;
}
.row1home {
width:23%;
float:left;
position:relative;
list-style:none;
}
.overlayText{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
opacity:0;
background:#000000;
color:#ffffff;
font-size:25px;
font-family:sans serif;
letter-spacing:9px;
transition:0.5s ease-in;
-webkit-transition:0.5s ease-in
}
.overlayText:hover{
opacity: 0.7;
cursor: pointer;
}
Ultima modifica di un moderatore: