[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.449
338
83
Anullato
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
amaranthinemess [HTML] :target e :hover HTML e CSS 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
Sermatth72 [HTML] creare link con colori Hover diversi, possibile? HTML e CSS 6
S [HTML] Effetto hover in un div HTML e CSS 6
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 3
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1
Z Mod_rewrite da HTML in PHP PHP 3
L Collegare un form html ad un database access Javascript 2
P HTML integrazione wordpress HTML e CSS 0
C [RISOLTO]Inserimento variabile php in input html PHP 20
L Eliminare estensione .html HTML e CSS 9
max1974 html in tooltip Javascript 0
C Risalire al php da html PHP 27
felino Esportare tabella HTML in PDF, quale libreria usare? Javascript 1

Discussioni simili