bordo div immagine sfumato

[luckino69]

Ciao a tutti,
sto cercando un modo per far apparire un bordo sfumato al passaggio del mouse.
Per ora so solo far apparire un bordo al passaggior del mouse

#sfondoimg:hover {
....
border: 2px solid red;
}

ma se io lo volessi sfumato questo bordo...come posso fare?
Grazie mille a tutti

[unnomechenonc'è]

scusa ma sfumato in che senso?

[luckino69]

Nel senso di avere il bordo, invece che essere solido in tutta la sua larghezza, cioè partire da un colore intenso e gradatamente sfumato.
Per intenderci in questo link
http://css.html.it/articoli/leggi/43...-background/2/
c'è l'esempio di come fare per fare un div container con i bordi sfumati, io lo volevo fare sui 4 lati in un div che contiene l'anteprima di un immagine.

[unnomechenonc'è]

se devo essere sincero non ho capito bene a quale ti riferivi in quella pagina comunque puoi usare photoshop cioè creare l'immagine e creare poi un box che usi quell'immagine come bordi

oppure puoi giocare con le proprietà dei box usando i css dunque con quelle dei border ( bordi) che possono essere anche in rilievo scansalati scanalati internamente ecc... dando colori diversi hai margin border e padding (ma non so se sia realmente fattibile e corretto e soprattutto non so come si fa o almeno credo)

oppure puoi usare le proprietà dei border guarda qua capisci meglio sicuro: http://www.w3schools.com/css/css_border.asp

[luckino69]

Ti ringrazio, ma quello che cerco io è differente.
Allora, ho fatto alcune prove:
ho creato un immagine con photoshop con i bordi sfumati grande 10px in più dell'immagine

#scheda {
	width:155px;
	height:105px;
	float:right;
	position:relative;
	margin-top:20px;
	padding-left:5px;
	padding-top:5px;
	background:white;
	border:0;
	}
	
#scheda:hover{
	width:165px;
	height:115px;
	position:relative;
	margin-top:20px;
	padding-left:5px;
	padding-top:5px;
	background-image:url(../Img/sfondoimg2.png);
	float:right;
	border:0;
	}

Però l'immagine inserita nel div "scheda", quando ci passo sopra col mouse, si sposta leggermente in alto a sx (cosa al quanto fastidiosa) come se si posizionasse all'inizio dell'immagine che ho inserito come sfondo della scheda:hover .
Ho provato a giocare con il padding, ma a volte peggiora anche.
Io vorrei che l'immagine rimanesse ferma e al passaggio del mouse comparisse l'altra immagine sotto, in modo tale da vedere i bordi sfumati.