Disable border or hover effect on selected images only - html

Question

I have the following code to create a border around all images as well as hover effects, but how do I disable this on selected images (ie. social buttons or logo)
img {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

Answer 1

you could add a class to the image that you want/dont want to have the borders, then style them differently by using their class in the css instead.

Answer 2

You should write in css the full path to the image,for example
div.hover-img ul li p a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999; }
This additional class .hover-img and the path to the image helps you identify only the images you need to be bordered in hover position.

Answer 3

add a seperate class
.noshadow{ border:none; box-shadow:none}
Add this class to the element where you don't required the box-shadow and border

Answer 4

use the css not selector
like this
html markup
<div>
<img src="http://images03.olx.in/ui/3/20/99/45761199_1.jpg" alt="not found"/>
<img src="http://i1-news.softpedia-static.com/images/news2/Facebook-Changes-Font-Size-Users-Grab-Their-Pitchforks-2.jpg" alt="not found" class="noborder"/>
</div>
css
img:not(.noborder) {
border: 2px solid red;
}
see the Documentation and use here
Demo Fiddle