Custom CSS for Bootstrap not working

Question

I'm using Twitter Bootstrap to build a website, and I want to have an image appear as grayscale until I hover over it, at which point it should become full color.

Instead of editing the Bootstrap.css, I created my own custom css: 'starter-template.css'.
Here's the code in 'starter-template.css':

.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

And here's the html:

<!-- Custom styles for this template -->
<link href="static/starter-template.css" type = "text/css" rel="stylesheet">

....

<a href="{{my_link}}"><img class = "thumbnail2" src="{{my_string}}"  align="right" height = "200" width = "200"></a>

However, there is no hover effect--the image appears as full color when the page loads and doesn't change when I hover over it. Any suggestions?

Thanks!

z-index doesn't have a unit, so remove the px from those rules. developer.mozilla.org/en-US/docs/Web/CSS/z-index — Tieson T.
– Tieson T., Commented Aug 27, 2014 at 3:46
Which browser are you using for testing? -webkit-filter applies only for chrome and safari. Also I don't see how bootstrap is related to this question. Is it possible to create a fiddle just to check that the code you have posted here works or not? — user1741851
– user1741851, Commented Aug 27, 2014 at 3:50
I am using Chrome. I deleted the px, but that had no effect :( — monkeybiz7
– monkeybiz7, Commented Aug 27, 2014 at 3:52

Tieson T. · Accepted Answer · 2014-08-27 04:07:06Z

2

Think fixing your z-index is all you need: http://jsfiddle.net/c8wtbjfw/

.thumbnail2 {
    -webkit-filter: grayscale(100%);
    z-index: -9999999999999999999999999;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
    -webkit-filter: grayscale(0%);
    z-index: -9999999999999999999999999;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

Seems to work when I test it in Chrome (36.0.1985.143). Since that's a Webkit filter, it won't work in IE or Gecko-based browsers.

An alternative might be to transition the opacity rule, since that has better support. Here's the same CSS, but with opacity instead: http://jsfiddle.net/c8wtbjfw/1/

.thumbnail2 {
    opacity: .5;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
    opacity:1;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

I did remove your z-index, since I'm not sure what you're trying to accomplish by pushing the image "under" the rest of the page.

edited Aug 27, 2014 at 4:07

answered Aug 27, 2014 at 3:54

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

monkeybiz7 Over a year ago

Thanks. Weirdly enough, when I saved the custom css under another name, it worked.

Tieson T. Over a year ago

Sounds like a cache issue. A hard refresh or clearing your history would probably have worked as well.

Suganth G · Accepted Answer · 2014-08-27 04:49:22Z

0

Try this:

.thumbnail2 {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(100%); /* Webkit Nightlies & Chrome Canary */
    z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.thumbnail2:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

edited Aug 27, 2014 at 4:49

answered Aug 27, 2014 at 3:54

Suganth G

5,1563 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

Custom CSS for Bootstrap not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related