Rollover fade con didascalia

**pallaz76** · 24-01-2014, 22:18

Ciao a tutti,
è la prima volta che scrivo su un forum in cerca di aiuto e spero davvero possiate aiutarmi.
Spero sia la sezione giusta...

Dunque sto cercando di realizzare un rollover che al passaggio del mouse mi porti l'opacità di questa immagine al 100% e all'uscita ritorni al 60% come da partenza.
L'immagine è questa:
Schermata 2014-01-24 alle 20.59.17.jpg

I' HTML:

<div class="didascalia">
<a href="#">
<img src="http://localhost:8888/wordpress/wp-content/uploads/2014/01/mrc-1-1.jpg" alt="" />
<span>Calendari e blocchi</span>
</a>
</div>

e il css:

div.didascalia img {
border: 0;
display: block;
opacity: 0.6;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out; }

div.didascalia img:hover { opacity: 1; }

div.didascalia a {
position: relative;
float: left;
color: #FFF;
text-decoration: none;
display: block; }

div.didascalia span {
position: absolute;
bottom: 0;
width: 100%;
padding: 3px 0;
color: #FFFFFF;
background-color: rgba(35,31,32,0.75);
cursor: pointer;
text-align: center;
height: 50px;
font-size: 10px;
font-family: "Open Sans", Arial, sans-serif;
line-height: 50px; }

Quello che vorrei ottenere è un fade dell'immagine ma non della didascalia, che vorrei restasse immutata ma vorrei facesse parte comunque del link.
Mi spiego meglio, se vado col mouse sopra l'immagine ottengo ciò che voglio ma se vado sulla didascalia, ovviamente non succede nulla.
Se assegno il fade al link intero anche la didascalia prende l'opacità, cosa che vorrei evitare.
Non voglio utilizzare 2 immagini in cross-fade, che sarebbe più semplice ma non darebbe lo stesso risultato visivo soprattutto sulla pulizia del testo.
Si può fare con i Css? o con Javascript?

Vi ringrazio anticipatamente.

**KillerWorm** · 25-01-2014, 19:44

Ciao e benvenuto/a sul forum.
Se parliamo di css allora la sezione è sbagliata. Segnalo la discussione e nel caso sarà spostata da qualche moderatore.

Per risolvere puoi agire semplicemente sul css modificando questa riga:

codice:

div.didascalia a:hover img  { opacity: 1; }

All'hover del link sarà modificata solo l'opacity di img.
Potresti farlo anche con javascript. Poi se usi jquery il gioco è abbastanza semplice, ma è un'altra storia.

PS:Quando posti del codice sul forum dovresti usare gli appositi tag di formattazione.

**pallaz76** · 26-01-2014, 22:39

Grazie mille KillerWorm,
è perfetto.
Mi scuso per aver postato nel posto sbagliato, non sapevo come risolvere e ho cercato forse il luogo più generico, chiedo venia anche per aver inserito il codice senza usare gli strumenti corretti...

Ho risolto perfettamente utilizzando la tua soluzione, ma così se hai tempo e voglia, e visto che devo imparare se avessi voluto utilizzare jquery come avrei dovuto fare?
Ti ringrazio ancora.

**KillerWorm** · 26-01-2014, 23:36

Con jquery puoi fare in vari modi. Ci sono diverse funzioni per creare transizioni sulle proprietà degli elementi.

Ecco un esempio pratico con fadeTo():

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type='text/javascript'>
      $(function(){
        $(".didascalia img").fadeTo(0,.6)
        $(".didascalia>a").hover(
          function() {
            $(this).children("img").stop().fadeTo(250,1)
          },
          function() {
            $(this).children("img").stop().fadeTo(250,.6)
          });
      });
    </script>
    <style type="text/css">
      div.didascalia img {
        border: 0;
        display: block;
      }
      div.didascalia a {
        position: relative;
        float: left;
        color: #FFF;
        text-decoration: none;
        display: block;
      }
      div.didascalia span {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 3px 0;
        color: #FFFFFF;
        background-color: rgba(35,31,32,0.75);
        cursor: pointer;
        text-align: center;
        height: 50px;
        font-size: 10px;
        font-family: "Open Sans", Arial, sans-serif;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="didascalia">
      <a href="#">
        <img src="image.jpg" alt="" />
        <span>Calendari e blocchi</span>
      </a>
    </div>
  </body>
</html>

**pallaz76** · 26-01-2014, 23:40

Fantastico!!!
Grazie, grazie, grazie...siete una risorsa incredibile.

Discussione: Rollover fade con didascalia

Strumenti discussione

Ricerca discussione

Visualizza

Rollover fade con didascalia

Permessi di invio