[HTML] Hover su immagine escluso titolo - flexbox

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
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.
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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, racchiudi immagine e descrizione in un div con position relative
HTML:
<div style="position: relative">
            <img src="http://www.sailcoolroute.eu/wp-content/gallery/gallery/cool-route-img-5.jpg">
            <a class="overlayText">
                DESCRIPTION..
            </a>
        </div>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.278
330
83
Anullato
 
Ultima modifica: