Come scurire un'immagine al passaggio del mouse?

Il mio problema ..Come scurire un'immagine al passaggio del mouse?

Ho un certo numero di immagini (all'interno hyperlink), e voglio che ciascuno per scurire al passaggio del mouse (cioè applicare una maschera nera di alta opacità o qualcosa del genere), e poi tornare alla normalità al passaggio del mouse. Ma non riesco a capire il modo migliore per farlo.

Ho provato ..

Jquery colori animati e alcuni riferimenti javascript.
Impostazione della opacità dell'immagine con javascript.

Non voglio ..

immagine start al 80% di opacità poi andare al 100% al passaggio del mouse (che è facile).
Per passare da 2 immagini (una luce & una scure), ha dimenticato la menzione questa scusa ..

Per ribadire ..

voglio nell'immagine (Inslide un collegamento ipertestuale) per scurire al passaggio del mouse e poi perde la sua ombra al passaggio del mouse.

Pensieri?

UPDATE:

Questo è il mio progresso dai suggerimenti. Sembra in IE8, ma non in FF3

<html> 
    <body> 
     <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)"> 
      <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
      style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
      onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> 
     </a> 
    </body> 
</html>

Pensieri?

- Lee

RISPOSTA

sto andando con questo (sembra funzionare in IE8 & FF)

<html> 
    <head> 
     <style type="text/css"> 

     .outerLink 
     { 
      background-color:black; 
      display:block; 
      opacity:1; 
      filter:alpha(opacity=100); 
      width:200px; 
     } 

     img.darkableImage 
     { 
      opacity:1; 
      filter:alpha(opacity=100); 
     } 
</style> 
    </head> 

    <body> 
     <a href="http://www.google.com" class="outerLink"> 
      <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
      class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
      onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> 
     </a> 
    </body> 
</html>

fonte

2009-11-17 Lee Englestone

c'è la possibilità di avere 2 immagini differenti, una chiara e una scura? – MalphasWats

Dorry Malphas, ho dimenticato di dire nella mia domanda che non volevo farlo in questo modo, applausi però –

Potrebbe essere che se il tuo "provato, non ha funzionato" (9_9 non pensi che potresti fornire maggiori informazioni su cosa hai provato esattamente e cosa è successo?) gli scenari non hanno funzionato, funzionerebbero se il tuo link e gli elementi dell'immagine sono impostati su CSS 'display: block' piuttosto che sul default' display: inline'. L'impostazione predefinita può limitare alcuni degli effetti in questione all'altezza della linea degli elementi in linea. – eyelidlessness

Oppure, simile a quella di erikkallen idea, rendere lo sfondo della Un tag nero, e rendere l'immagine semitrasparente al passaggio del mouse. In questo modo non dovrai creare div aggiuntive.

CSS Only Fiddle (funziona solo nei browser moderni)
JavaScript based Fiddle (sarà [probabilmente] funzionare in tutti i browser più comuni)

Fonte per la soluzione CSS-based:

a.darken { 
    display: inline-block; 
    background: black; 
    padding: 0; 
} 

a.darken img { 
    display: block; 

    -webkit-transition: all 0.5s linear; 
     -moz-transition: all 0.5s linear; 
     -ms-transition: all 0.5s linear; 
     -o-transition: all 0.5s linear; 
      transition: all 0.5s linear; 
} 

a.darken:hover img { 
    opacity: 0.7; 

}

E l'immagine:

<a href="http://google.com" class="darken"> 
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200"> 
</a>

fonte

2009-11-17 09:39:59 fresskoma

Provato, non ha funzionato. –

+24

Questo sicuramente funziona. "Non ha funzionato" non è una descrizione del problema molto utile, quindi per favore vieni con qualcosa di più specifico o nessuno sarà in grado di aiutarti. – fresskoma

Scuse x3ro (e tutto), cercherò di essere più descrittivo in futuro ;-) –

mettere un nero, semitrasparente, div in cima esso.

fonte

2009-11-17 09:37:46 erikkallen

Provato, non ha funzionato. Se lo fai funzionare in questo modo, faccelo sapere. –

Come si fa a renderlo trasparente? Ha bisogno di qualche ritocco per ottenere il cross-browser giusto (che jQuery farà per te). – erikkallen

Creare png nero con Diciamo trasparenza del 50%. Sovrapponi questo al passaggio del mouse.

fonte

2009-11-17 09:38:50 bitbonk

ne dici di questo ...

<style type="text/css"> 
    div.frame { background-color: #000; } 
    img.pic:hover { 
     opacity: .6; 
     filter:alpha(opacity=60); 
    } 
</style> 

<div class="frame"> 
    <img class="pic" src="path/to/image" /> 
</div>

fonte

2009-11-17 09:55:05

Grazie Ei, sembra funzionare bene in FF ma non in IE8. qualche idea? –

Fallo con Jquery, otterrai una soluzione che funziona su più browser in quasi tutti i browser. '$ ('# id_of_div'). css ('opacity',. 6);' –

mi rendo conto che questo è un po 'in ritardo, ma si potrebbe aggiungere il seguente al codice. Tuttavia, questo non funzionerà per i png trasparenti, per questo sarebbe necessaria una maschera di ritaglio. Di cosa ora vedrò.

outerLink { 
    overflow: hidden; 
    position: relative; 
} 

outerLink:hover:after { 
    background: #000; 
    content: ""; 
    display: block; 
    height: 100%; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

fonte

2010-12-13 00:00:12

Rende l'immagine 100% luminosa in modo che sia chiara. E poi su Img hover riducilo a qualsiasi luminosità tu voglia.

img { 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
img:hover { 
 
    -webkit-filter: brightness(70%); 
 
    filter: brightness(70%); 
 
}

<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">

che lo farà, Speranza che aiuta

fonte

2015-04-13 23:06:15

Dovresti spostare le transizioni su 'img {}', quindi non devi aggiungere 'filter: brightness (100%)'. – poxip

Come scurire un'immagine al passaggio del mouse?

risposta

Problemi correlati