CODEWITHSUNDEEP
htmlcss
WAS
WAS

Reputation: 59

Overwrite max-width with new property

You'll see in this code we have a tree of random code and child image. The child image will always follow the parents max-width property for images, even if you use a custom class. Is there anyway to get by this for the class used?

JSFiddle

Actual use of code

Note this is on vbulletin using so many CSS overrides it's ridiculous. The new CSS is in the vbulletin custom css file "additional.css"

Additionally note that the hover effect does constrain to 120px, however the normal class out of over does not.

CODE

<div class="content">
    <p>
        <div>
            <div class="something">
               <img src="http://shadowness.com/file/item9/314049/image.jpg" class="thumbbbimg" />
            </div>
         </div>
    </p>
</div>

CSS

.content img {
    max-width: 100%;
}

.thumbbbimg {
    max-width: 120px;
}

Actual CSS

/* Thumb BBCode CSS */
    .content img.thumbbbimg {
        width: 120px;
        max-width: 120px;
        max-height: 120px;
        opacity: 75;
        margin: 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        border: 1px solid #8C8C8C;
        filter: url(filters.svg#grayscale);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(100%); 
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(1); 
        overflow: hidden;
    }

    .content img.thumbbbimg:hover {
        width: 120px;
        max-width: 120px;
        max-height: 120px;
        opacity: 100;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
        -moz-box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
        box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
        filter: none;
        -webkit-filter: grayscale(0%); 
        filter: gray;
        -webkit-filter: grayscale(0); 
  }

Upvotes: 0

Views: 101

Answers (3)

Andrew S
Andrew S

Reputation: 136

Don't make a habit of this but you could override with a !important like so

.thumbbbimg {
    max-width: 120px !important;

}

Upvotes: -1

ProllyGeek
ProllyGeek

Reputation: 15836

.content img :not(.thumbbimg) {
        max-width: 100%;
    }
    .thumbbbimg {
        max-width: 120px; 
    }

fiddle:

http://jsfiddle.net/41tyamsz/2/

using :not will apply the rule to elements except specified ones.

Upvotes: 1

Anonymous
Anonymous

Reputation: 10216

You could achieve this by replace the .thumbbbimg with img.thumbbbimg like this:

JSFiddle - DEMO

.content img {
    max-width: 100%;
}
img.thumbbbimg {
    max-width: 120px;
}
<div class="content">
    <p>
        <div>
            <div class="something">
                <img src="http://shadowness.com/file/item9/314049/image.jpg" class="thumbbbimg" />
            </div>
        </div>
    </p>
</div>

Upvotes: 1

Related Questions