Testo hover

[he-man]

Ho una serie di tab che si espandono al clik sui quali vorrei un testo overlay hover con sfondo colorato,
ma se assegno un altro div interno mi perde l'impaginazione.
Come posso inserire un testo overlay hover con sfondo colorato?

<div class="row">
  <div class="grid" onclick="openTab('b1');" style="background:green;"> <!--- testo overlay hover con sfondo colorato (style="background:green;" non mi serve)--->
      
 <img src="img.jpg" alt="...i" class="grid-thumbnail"> 
  
  </div>

[he-man]

Si può fare con jquery senza perdere l'impaginazione e l'apertura degli spazi collassabili?

[Vincent.Zeno]

ti ricordo che il crossposting non è consentito, se necessario spostiamo la discussione (anche su richiesta).
l'altra discussione la chiudiamo.

in ogni caso la domanda mi sembra troppo generica.
puoi essere più specifico?

[he-man]

Si grazie, si può spostare non credo ci sia possibilità di farlo in html.

Aggiungo un po' di codice per spiegare la situazione
QUesto è il tab:

<div class="grid" onclick="openTab('b1');" style="background:#fff;">
    Box 1
  </div>

questo il codice del tab che si espande:

<div id="b1" class="containerTab" style="display:none;background:#fff">
 <img src="image1.jpg" alt="" class="grid-thumbnail"> 
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <h2>Box 3</h2>
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
</div>

Questo lo script che lo attiva:

<script>
function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}
</script>

[Vincent.Zeno]

e cosa vorresti aggiungere?

[he-man]

Sto cercando di aggiungere un testo con overlay al passaggio del mouse che non mi scombini i div

[Vincent.Zeno]

in che posizione?
fai un esempio di codice

[he-man]

Mancava del codice nel tab, c'è un'immagine. Dovrebbe essere un classico overlay sull'immagine con sfondo colorato e testo che appare, anche sfruttando alt""

<div class="grid" onclick="openTab('b1');" style="background:#fff;">
    <img src="image1.jpg" alt="" class="grid-thumbnail" /> 
  </div>

[Vincent.Zeno]

quindi vorresti far apparire del testo in overlay sull'immagine image1.jpg, giusto?

[Vincent.Zeno]

se ho capito bene questo può esserti d'aiuto:
https://www.w3schools.com/cssref/sel_hover.asp

esempio per te

span#b1 {
  display: none;
}


img#b1:hover + span#b1 {
  display: block;
}



<img src="image1.jpg" alt="" id="b1"  class="grid-thumbnail"  ><span id="b1">aaa</span>

per le misure poi vedi tu...