How to override Materialize CSS in Ruby on Rails? [duplicate] - ruby-on-rails

Question

I've been looking through some posts on the internet about Materialize in Rails, however this area seems to be very fuzzy. I am currently using the materialize-sass gem.
I didn't find very many helpful posts, I decided to resort here.
Here's my code for a page I have pages/discover.html.erb
<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
<div class="row">
<div class="col s12 m5">
<div class="card">
<div class="card-image b">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg">
<span class="card-title">Cregg Cobb Is Back At It Again, But Only This Time He Has Guns</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<div class="chip">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg" id="cobb">
Like
</div>
</div>
</div>
</div>
</div>
I want to make the <img> darker by using filter: brightness(50%);
How do I go about doing this? Where do I begin?
Bonus: If you know where I can add the jQuery stuff that Materializecss.com mentions when discussing components and transitions, it would be greatly appreciated!

Answer 1

Since it's just a single override, you could add a new .css file to assets (or wherever you're storing static stuff), with a !important class:
img.darker {
filter: brightness(50%) !important;
}
Then import it at the top of your template:
<%= stylesheet_link_tag "/path/to/css.file" %>
And add the class to your image tag:
<img src="/my/img.png" class="darker">
Alternatively you could just style the image tags individually:
<img src="/my/img.png" style="filter:brightness(50%)">