0

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;
}
1
  • img:not(whatever is special about them)
    – Mr Lister
    Oct 10, 2013 at 10:48

4 Answers 4

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.

0

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.

0

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

0

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.