Immagine bagliore CSS-immagine quando si passa con il singolo colore

Vorrei chiedere come devo applicare un bagliore di colore diverso a un bordo dell'immagine quando si passa il mouse su un utente? come dire che in questo file JSFiddle, ho un pollice verde e un pollice rosso. Voglio che ogni bordo dell'immagine si illumini in base al colore dell'immagine o a qualsiasi colore specificato. Come dovrei riuscirci?Immagine bagliore CSS-immagine quando si passa con il singolo colore

PS ** Ad esempio, l'immagine viene convertita in base64 nel JSFiddle.

È così che faccio nel mio CSS

img{ 
    width: 16px; 
    cursor: pointer; 
    padding: 10px; 
} 

img:hover{ 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}

Thank You

fonte

2014-09-05 Kenny Yap

io non capisco! E 'questo quello che vuoi ? http://jsfiddle.net/jcsjpcbb/4/ – Jack

Non è possibile per HTML/CSS determinare il colore principale dell'immagine visualizzata. Se conosci il colore predominante di ogni immagine, dai loro nomi di classe e scrivi il relativo CSS. – Paul

Prova un po 'di Vanilla JS –

Se ho capito la tua domanda, allora qui è un esempio DEMO

img{ 
    width: 48px; 
    cursor: pointer; 
    /*padding: 10px;*/ 
    /* border:1px solid #fff;*/ 
    margin-right: 20px; 
} 

img:hover{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
box-shadow:   0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
} 
img:last-of-type:hover{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
-webkit-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); 
-moz-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); 
box-shadow:   0px 0px 30px 0px rgba(232, 0, 0, 0.67); 
}

fonte

2014-09-05 12:34:01

thx alex ... questo è esattamente quello che voglio ... –

il benvenuto))) –

@AlexWilson Buona risposta, ma c'è anche il supporto per Opera webbrowser (anche nel 2014) con "estensione del fornitore o prefisso": '-o-' per esempio: '-o-box-shadow',' -o- border-radius' ulteriori informazioni possono essere trovate [qui] (http://www.opera.com/docs/specs/presto28/css/o-vendor/). Spero che questo commento sia utile per le persone che vogliono supportare più browser .. NOTA: aggiungi sempre le estensioni fornitore prima del valore predefinito/alla fine nel tuo codice, ad esempio: 'box-shadow dovrebbe essere dopo l'ultima estensione del fornitore come è perfettamente scritto nel codice di Alex Wilson, ottimo lavoro – jagb

Cambio:

box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

box-shadow: inset 0 0 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

DEMO

box-shadow Syntax:

Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

fonte

2014-09-05 12:32:12

Come scritto nel commento, non c'è modo per HTML/CSS per determinare il colore principale dell'immagine visualizzata. Se conosci il colore predominante di ogni immagine, dai loro nomi di classe e scrivi il relativo CSS.

Vedere demo per una versione semplice.

img.green:hover{ 
    border-color: #66afe9; 
    box-shadow: 0 0 8px rgba(0,255,0, 0.6); 
} 
img.red:hover{ 
    border-color: #66afe9; 
    box-shadow: 0 0 8px rgba(255,0,0, 0.6); 
}

fonte

2014-09-05 12:33:45 Paul

Box ombra ha lavorato anche per,

img:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

Se volete più stile in CSS

http://ianlunn.github.io/Hover/

o utilizzare un'immagine personalizzata come questo

img:hover{background:url('http://www.addglitter.com/link-sparkle.gif');

fonte

2014-09-05 12:46:07

Immagine bagliore CSS-immagine quando si passa con il singolo colore

risposta

Problemi correlati