[HTML] Hover su immagine escluso titolo - flexbox

[ujroberto]

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.

[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

.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;
}

 

[criric]

Ciao, racchiudi immagine e descrizione in un div con position relative

<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]

Anullato

 

[ujroberto]

Grazie 1000 Criric!