problema opacity con I.E.

chebellagiornata

problema opacity con I.E.

Salve a tutti, ho installato un modulo su Joomla per creare una gallery di immagini. Sto provando ad apportare delle piccole migliorie, in particolare stavo cercando di creare un effetto opacità al passaggio del mouse. In verità ci sono pure riuscito, funziona perfettamente con tutti i browser ma con I.E. va a scatti, cioè non ottengo un effetto di tipo "fade" ma quando passo il mouse sopra sopra l'immagine diventa di colpo opaca, non è graduale!

Ecco il codice in questione:

filter:alpha(opacity=90);

-moz-opacity: 0.9;-webkit-opacity: 0.9; opacity: 0.9;

...per caso qualcuno conosce un'alternativa per renderlo funzionale (cioè non di colpo ma con movimenti ed effetti graduali) anche con I.E. ???

Grazie!

axxe16

A parte ie10 le precedenti release non supportano le transizioni css3 quindi la soluzione è utilizzare un js (da avviare solo quando si utilizza ie o da sostituire alle transizioni css3). Dai un okkio a jQuery, la funzione animate dovrebbe fare al caso tuo api.jquery.com/animate/

chebellagiornata

...eh, il fatto è che non sono molto pratico di js, con i css più che riesco a smanettarci... io in pratica vorrei ottenere un effetto molto simile a quello riportato in basso, analizzando il css mi sembra diverso dal mio e forse non usa neanche js, no?

esempio: dhtheme.com/bsp/index.php/features/gallery

axxe16

Si anche questo template usa jQuery per ottenere quell'effetto. Puoi usare uno script come questo:


<img class="hoverEffect" src="h t t p : / / dhtheme.com/bsp/images/Demo/gallery/1.jpg" />
<script src="h t t p : / / codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( ".hoverEffect" ).hover(
function() {
  $(this).fadeTo( "slow" , 0.5);
}, function() {
  $(this).fadeTo( "fast" , 1);});
</script>

chebellagiornata

...per caso con questo js si potrebbe fare qualcosa anche per lo "scale" ? in pratica io sto cercando di mettere due effetti, uno fade (vedi esempio 1) e uno scale (vedi esempio 2):

esempio 1: dhtheme.com/bsp/index.php/features/gallery

filter:alpha(opacity=90);-moz-opacity: 0.9;
-webkit-opacity: 0.9;
opacity: 0.9;

esempio 2: tristan-brookes.co.uk/magnific-popup-responsive-lightbox

-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);

...pretendo troppo?

axxe16

Bhe se non vuoi sporcarti le mani con js e jQuery si
Comunque in pratica vuoi un effetto sull'immagine e ci vuoi collegare una lightbox. Lo script che ti ho scritto prima può essere modificato mettendo un animate al posto o assieme al fadeto. Ma indubbiamente la cosa diventa un po più complicata magari se ho tempo più tardi ti posto uno script

chebellagiornata

...guarda sarebbe il massimo (anche se solo di dici dove trovarlo)

chebellagiornata

...ah, ho analizzato meglio il modulo che sto usando per la gallery (il sito è per Joomla v.3.1 - per ora il sito è in locale) e la query che mi hai consigliata già c'è, il nome non è proprio uguale ma credo sia la stessa, infatti questo è il richiamo fatto dal template:

...non si potrebbe creare uno script da poter inserire direttamente dentro al js (jquery.min.js) ? anche perché, utilizzando Joomla, io devo includere questa gallery in un articolo e non avrei modo di scrivere tutto uno script dentro un articolo (o comunque sarebbe troppo macchinoso poi da gestire)

chebellagiornata

...nessun consiglio?