Visualizzazione risultati 1 fino 9 di 9

Discussione: Immagine non cambia colore

  1. #1
    Data registrazione
    26-11-2018
    Messaggi
    15

    Predefinito 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>
    Ultima modifica di alemoppo : 11-01-2019 alle ore 14.12.34 Motivo: sistemato tag

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!

  3. #3
    Data registrazione
    26-11-2018
    Messaggi
    15

    Predefinito

    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?

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!
    Ultima modifica di alemoppo : 11-01-2019 alle ore 16.37.35

  5. #5
    Data registrazione
    26-11-2018
    Messaggi
    15

    Predefinito

    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ù

  6. #6
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!

  7. #7
    Data registrazione
    26-11-2018
    Messaggi
    15

    Predefinito

    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

  8. #8
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

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

    Ciao!

  9. #9
    Data registrazione
    26-11-2018
    Messaggi
    15

    Predefinito

    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>
    Ultima modifica di gioventucalciosansevero : 13-01-2019 alle ore 10.10.23

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •