CODEWITHSUNDEEP
csshovermaterializestylingbox-shadow
Tony Caterev
Tony Caterev

Reputation: 167

Modify shadow color of the ".hoverable" class in Materialize.css

I'm trying to change the shadow color of the .hoverable class in the Materialize.css framework, as the current color is not visible on dark backgrounds.

modifying box-shadow and text-shadow properties didn't worked.

HTML:

<div class="col s12 m3">
        <div class="card hoverable">
            <div class="image">
            <img src=# alt='image' />
            </div>
            <div class="card-content">
                <p class='card-name'>...</p>
                <p class='card-mail'>...</p>
                <p class='card-location'>...</p>
            </div>
        </div>
    </div>

CSS:

.card {
    background-image: linear-gradient(181.8322969733734deg, rgba(13, 33, 130,1) -2.5876288659793687%,rgba(56, 203, 229,1) 84.42268041237114%,rgba(57, 204, 230,1) 84.42268041237114%);
}

.card-name {
    font-weight: bold;
    color: white;
}

Upvotes: 1

Views: 1029

Answers (1)

Bahman Parsa Manesh
Bahman Parsa Manesh

Reputation: 2370

For changing the shadow color of a .hoverable, you should override a box-shadow for both .card and .hoverable class. 

.card.hoverable {
    box-shadow: 0 2px 2px 0 blue, 0 3px 1px -2px blue, 0 1px 5px 0 blue;
}

And to add your desired style for hover:

.card.hoverable:hover {
    box-shadow: 2px 4px 5px 0 blue, 2px 5px 3px -3px blue, 2px 5px 10px 0 blue;
}

You can use cssmatic box-shadow generator to create your desired box shadow.

Upvotes: 2

Related Questions