Testo hover

[he-man]

Un po' diverso dall'esempio, mi sono sicuramente spiegato male, posto tutto il codice:

<div class="senzanome">
<!-- Three columns -->
<div class="row">
  <div class="grid " onclick="openTab('b1');" style="background:#fff;">  
 <img src="image1.jpg" alt="" class="grid-thumbnail"> <!---SU QUESTA IMMAGINE VORREI METTERE TESTO OVER AL PASSAGGIO--->
  </div>
  <div class="grid" onclick="openTab('b2');" style="background:#fff;">
    <img src="image2.jpg" alt="..." class="grid-thumbnail"><!---SU QUESTA IMMAGINE VORREI METTERE TESTO OVER AL PASSAGGIO--->
  </div>
  <div class="grid" onclick="openTab('b3');" style="background:#fff;">
   <img src="image2.jpg" alt="..." class="grid-thumbnail"><!---SU QUESTA IMMAGINE VORREI METTERE TESTO OVER AL PASSAGGIO--->
  </div>

  <div class="grid" onclick="openTab('b4');" style="background:#fff;">
   <img src="image2.jpg" alt="..." class="grid-thumbnail"><!---SU QUESTA IMMAGINE VORREI METTERE TESTO OVER AL PASSAGGIO--->
  </div> 
</div>



<div id="b1" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="image1.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">TITOLO</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>
  </div>

</div>

<div id="b2" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
   <div class="row">
    <div class="col"><img src="image2.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">TITOLO</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>
  </div>
  
</div>

<div id="b3" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="image3.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">TITOLO</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>
  </div>
  
<div id="b4" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="image4.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">TITOLO</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>
  </div>
</div>
<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]

ho notato ora che il mio esempio confligge con gli id, quindi ti propongo una versione corretta

span#sb1 {
  display: none;
}


img#ib1:hover + span#sb1 {
  display: block;
}


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

ovviamente il posizionamento e la scelta del contenitore la puoi ancora fare e adattare

se non ti è chiaro il concetto chiedi pure...

[he-man]

Non arrivo a capire il codice che hai scritto, l'ho inserito ma al passaggio del mouse non c'è overlay sulla prima immagine.
Visualizzo"aaa" sulla seconda immagine che si apre nell'elemento tab espanso e questa immagine perde anche le dimensioni originali.
Qui c'è una sitazione simile a quella che vorrei avere (senza il tab che si apre)

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

[Vincent.Zeno]

se non sei riuscito ad integrare il mio esempio, ma hai trovato l'esempio idoneo per te... usa quello
è abbastanza chiaro e semplice. hai qualche dubbio?

[he-man]

Quello è uno dei modelli che mi facevano saltare l'impaginazione degli altri div e che non sono riuscito ad usare...ho optato per un testo scritto sull'immagine... meno d'effetto anzi senza effetti ma mi ci stavo scervellando da giorni.

Ti ringrazio comunque per le indicazioni. Invece hai idea del perché queste dimensioni sull'immagine vanno a causare problemi quando restringo lo schermo?

.grid-thumbnail{

   width: 100%;  
 height: auto; }

 /*l'immagine diventa minuscola fino a sparire*/

 

 .grid-thumbnail{
 max-width: 100%;
 height: auto;}
 /*l'immagine diventa minuscola fino a sparire*/

[Vincent.Zeno]

Invece hai idea del perché queste dimensioni sull'immagine vanno a causare problemi quando restringo lo schermo?

senza contesto non so nemmeno che problemi possano dare.
fornisce esempi completi, sarà più semplice aiutarti.

per l'altro problema:
se fai vedere cosa avevi fatto si potrebbe controllare cosa non funziona a dovere e cercare di integrarlo al meglio

[he-man]

Si, hai assolutamente ragione. Ecco la situazione attuale, ma al testo sull'immagine ho proprio rinunciato accontentandomi dell'ombra attorno (questa funziona!) :

<style>

.column {
  float: left;
  width: 25%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: WHITE;
}

.containerTab {
  padding: 20px;
  color: #555555;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}


.closebtn {
  float: right;
  color: #aa1a2f;
  font-size: 35px;
  cursor: pointer;
}
.grid-thumbnail{
  width: 100%;
   height: auto;
   }
  .grid-thumbnail:hover { 
 
box-shadow: 10px 10px 10px 2px #ccc;
-webkit-box-shadow: 10px 10px 10px 2px #ccc;
-moz-box-shadow: 10px 10px 10px 2px #ccc;
} 

</style>


</head>
<body>


<div class="row">
  <div class="column" onclick="openTab('b1');" style="background:#fff;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="grid-thumbnail">
  </div>
  <div class="column" onclick="openTab('b2');" style="background:#fff;">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="grid-thumbnail">
  </div>
  <div class="column" onclick="openTab('b3');" style="background:#fff;">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="grid-thumbnail">
  </div>
  <div class="column" onclick="openTab('b4');" style="background:#fff;">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="grid-thumbnail">
  </div
></div>


<div id="b1" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">Box 1</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>
  </div>
  
</div>

<div id="b2" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 <div class="row">
    <div class="col"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">Box 2</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>
  </div>
  
</div>

<div id="b3" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">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>
  </div>
  
</div>
<div id="b4" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Titania_%28moon%29_color.jpg/600px-Titania_%28moon%29_color.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:#aa1a2f;">Box 4</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>
  </div>
  
</div>

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

se ho capito bene... il tuo problema dipende dalla mancanza del viewport da mettere in head

<meta name="viewport" content="width=device-width, initial-scale=1" >

[he-man]

Il viewport c'è già, non dipende da questo

[Vincent.Zeno]

allora cosa lamenti, cosa non ti funziona?