किसी भी पृष्ठभूमि पर छवियों (होवर पर) को हाइलाइट करें

Question

यह सुनिश्चित करना आम है कि कुछ माउस छवियों को जलाया जाए (चमक बढ़ाएं) जब आपका माउस पॉइंटर उनके ऊपर हो जाता है।

एक तकनीक जिसे मैं जानता हूं, सफेद पृष्ठभूमि पर काम करता है, होवर पर अस्पष्टता को कम करना है, जो प्रभाव से अधिक सफेद होने से चमक बढ़ाता है। समस्या स्पष्ट रूप से है कि यह केवल एक सफेद पृष्ठभूमि पर काम करेगा।

वहाँ किसी भी सीएसएस कि मैं अपनी छवियों है कि या तो

होगा एक में जोड़ सकते हैं। छवियों में एक सफेद पृष्ठभूमि जोड़ें जो ठीक से फिट बैठती है, ताकि एक ही प्रकाश-पृष्ठभूमि प्रभाव किसी भी रंगीन पृष्ठभूमि पर हो, या

बी। एक div

<div class="brightness"> 
    <img src="test.jpg"> 
</div> 

साथ अपनी छवि सभी

Answer 1

image:hover { filter: brightness(50%); } 

Answer 2

encapsule पर सफेद पृष्ठभूमि जोड़ने या अस्पष्टता का उपयोग किए बिना एक ही प्रभाव को प्राप्त करने और अच्छा सीएसएस लागू होते हैं:

.brightness { 
    background-color: white; 
    display: inline-block; 

} 
.brightness img:hover { 
    opacity: .5; 
} 

बेला: http://jsfiddle.net/5yush/

Answer 3

कुछ आपके लिए यह काम पसंद करेगा? http://jsfiddle.net/omegaiori/teAP7/1/

आदेश पाने के लिए यह काम कर आप एक div

.img-cont { 
    background:white; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    margin:30px auto 0; 
    width:300px; 
} 

में अपनी छवि लपेटो और अपनी छवि 100%

को width सेट आप padding मूल्य बदल सकते हैं के रूप में आप चाहते हैं, बॉक्स में हमेशा box-sizing संपत्ति

Answer 4

इस कक्षा को किसी भी छवि में जोड़ें

.image-hover-highlight { 
 
    -webkit-transition: all 0.50s; 
 
    transition: all 0.50s; 
 
    &:hover { 
 
     border: 1px solid gray; 
 
     filter: brightness(130%); 
 
     -webkit-filter: brightness(130%); 
 
     -moz-filter: brightness(130%); 
 
     -o-filter: brightness(130%); 
 
     -ms-filter: brightness(130%); 
 
     -webkit-transition: all 0.50s; 
 
     transition: all 0.50s; 
 
    } 
 
}