छवि में चमक जोड़ें - सीएसएस, छवि, चमक

मैं एक के लिए एक समान प्रभाव पाने की कोशिश कर रहा हूँ यहाँ (इस मामले में एक फार्म फ़ील्ड में फोकस पर)।हालांकि मैं इसे एक छोटी सी छवि के आसपास चाहता हूं, और होवर पर होना चाहता हूं। जाहिर है, मैं दो sprites बना सकता हूं, और सीएसएस में छवि को होवर पर चमक छवि के साथ प्रतिस्थापित करें, लेकिन इसमें एनीमेशन शामिल नहीं होगा। तो वर्तमान में मेरे पास है:

img.glow {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}

img.glow:hover {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

यह काम करता है, लेकिन समस्या यह है कि मेरी छवि हैगोलाकार कोनों और चमक प्रभाव पूरी तरह से छवि के चारों ओर होता है (यानी यह छवि को एक वर्ग के रूप में मानता है, और चमक के भीतर छोटे सफेद कोनों को छोड़ देता है, जबकि मैं छवि के किनारों को गले लगाने के लिए चमक चाहता हूं)। छवि एक पारदर्शी पीएनजी है। क्या मैं संभव करना चाहता हूं?

धन्यवाद, जी

उत्तर:

जवाब के लिए 2 № 1

बस एक जोड़ें border-radius संपत्ति, ताकि आपके आईएमजी तत्व में अच्छा गोल कोनों हो। छाया तत्व के आकार का पालन करेंगे।


संबंधित सवाल
सबसे लोकप्रिय