Immagine non cambia colore

Ciao ho cercato di mettere su un codice css, dove passando col mouse sopra l'immagine, dovrebbe cambiare colore, ma non funziona, anzi funziona in parte, cambia colore solo il padding, mi potete aiutare a capire dove sta l'errore? Vi posto anche il codice

Codice HTML:

---

<style type="text/css">
.btn {
  background-color: #FFF;
  border-radius: 10px;
  border:none;
  color: black;
  padding: 10px 10px;
  width: 300px;
  height: 300px;
  text-align: left;
  font-size: 10px;
  margin: 4px 2px;
}
.btn:hover {
  background-color: yellow;
  color: white;
 
}
.btn:img {
 img-color: yellow;
}
</style>

<div class="btn">
<a href="http://gioventucalciosansevero.altervista.org/staff-tecnico/luigimessinese-2/" rel="attachment wp-att-354"><img src="http://gioventucalciosansevero.altervista.org/wp-content/uploads/2019/01/luigimessinese.jpg" alt="" width="" height="" class="" /></a>
</div>

---

Dipende da cosa vuoi fare: se vuoi fare una specie di cornice, dovresti impostare la dimensione di btn almeno come l'immagine:

Codice:

---

width: 437px;
height: 393px;

---

Se però vuoi modificare proprio lo sfondo dell'immagine, ovviamente non è possibile perché l'elemento btn sta sotto l'immagine. Quindi o utilizzi una immagine con lo sfondo trasparente, oppure più facilmente cambi l'immagine, impostando una con lo sfondo differente. (in questo secondo modo, per un effetto migliore ti consiglierei di precaricare l'immagine così da essere subito caricata dall'utente).

Ciao!

Giao Alemoppo, grazie per la risposta, l'immagine che ho inserito(che purtroppo sono io) è solo un immagine di esempio, ne devo inserire, quelle che rimarranno effettivamente sul mio sito, circa una trentina, divise in tre colonne,per cui vorrei che quando passo sull'immagine col mouse, l'immagine mi cambiasse colore, diventasse gialla trasparente, che comunque sotto si intravedesse sempre l'immagine,come posso aggiustare?

Andrebbe bene una cosa del genere? Ovvero sovrapporre un contenitore con sfondo giallo un po' trasparente; puoi regolare la trasparenza con il parametro "opacity".

Codice HTML:

---

<a href="http://gioventucalciosansevero.altervista.org/staff-tecnico/luigimessinese-2/" rel="attachment wp-att-354" class="bloccoimg">
    <div>&nbsp;</div>
    <img src="http://gioventucalciosansevero.altervista.org/wp-content/uploads/2019/01/luigimessinese.jpg">
</a>

---

Codice:

---

.bloccoimg div
{
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10;
  background:yellow;
  width: 437px;
  height: 393px;
  opacity:0;
}

.bloccoimg div:hover
{
  opacity:0.3;
}

---

Ciao!

Ciao alemoppo, cosi andava benissimo,ho aumentato l'opacità a 0,7 ed era proprio come lo volevo io, però aveva un problema che quando passavo sull'immagine col mouse, l'opacità, si colorava verso l'alto e mi rimaneva un terzo di figura sotto, scoperta, non colorata, però adesso, ha snesso proprio di funzionare, nonmi va più:roll:

Senza vedere il codice mi è impossibile aiutarti.

Il fatto che non funziona più, può essere dato da qualche errore CSS, come ad esempio scrivere 0,7 piuttosto che 0.7 (va usato il punto!).

Per il fatto che non tutta l'immagine era coperta, probabilmente le dimensioni del div non erano corrette, e/o i margini.

Ciao!

ciao alemoppo, tutto ad un tratto, adesso mi funziona di nuovo, ho risolto anche il problema dell'opacity che mi translitterava, togliendo top e left, cosi l'opacity è centrato, adesso mi rimane il problema , come ti ho detto all'inizio, di inserire una trentina di immagini divise in tre colonne, come posso fare?
ciao

Se provi ad inserirne più di una cosa succede? Il tuo problema è il posizionamento? Prova tramite flexbox.

Ciao!

Ciao Alemoppo finalmente ho risolto, grazie del consiglio di flexbox, ho preso un codice più o meno quello che interessava a me, facendo delle modifiche ed integrando alcune cose, cambiando "div" con "img" aggiungendo al codice css "opacity" e "hover" per cambiare colore l'immagine al passaggio del mouse, adesso non mi resta che inserire tutte le immagini che ho da mettere. Ti posto il codice
Grazie mille ciao

Codice HTML:

---

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flex-container {
 display:flex;
 flex-flow:nowwrap;
 background-color:yellow;
 }
.flex-container > img {
  z-index:10;
  margin:10px;
 background:yellow;
  width:296px;
 line-height:329px;
text-align:center;
 font-size:30px;
 opacity:0;
}
.flex-container img:hover
{
opacity:0.3;
}
</style>
</head>
<body>
<div class="flex-container">
  <a href="http://gioventucalciosansevero.altervista.org/societa/luigimessi/" rel="attachment wp-att-498">
<img src="http://gioventucalciosansevero.altervista.org/wp-content/uploads/2019/01/luigimessi.jpg" alt="" width="296" height="329" class="alignnone size-full wp-image-498" />Luigi Messinese</a></div>
 <div class="flex-container">
  <div>2</div>
  <div>3</div> 
  <div>4</div>
  <div>5</div>
  <div>6</div> 
  <div>7</div>
  <div>8</div>
  <div>9</div> 
  <div>10</div>
  <div>11</div>
  <div>12</div> 
</div>


</body>
</html>

---