CODEWITHSUNDEEP
htmlcsssvg
InvalidSyntax
InvalidSyntax

Reputation: 9509

Add SVG with colour overlay using CSS

I have a list of icons in SVG format which I am using on a web application.

The icon foreground colour is in black, I would like to use CSS to change this colour to white when hovered over. What is the simplest way to do this using CSS (if possible?)

The HTML markup is as follows:

<img class="icon" src="user.svg">

CSS

.icon {
width: 200px;
height: auto;
}

.icon:hover {
fill: #fff; /* this doesn't work */
}

JSFiddle

Upvotes: 2

Views: 8577

Answers (2)

Adam Chubbuck
Adam Chubbuck

Reputation: 57

Given your current set up, would it be possible for you to do the following instead?:

HTML

<i class="icon icon-user"></i>

CSS

.icon {
    background-image: url('your/svg/file.svg');
    background-repeat: no-repeat;
}

.icon-user {
    background-position: 50px 100px;
}

.icon-user:hover {
    color: red;
 }

So the idea here is that you would use the background property of the <i> tag to set a background image, being the entire .svg file, then use the background-position property to display a specific region within that .svg file. On hover, the color of the <i> tag should change to the specified color based on the color property.

Upvotes: 0

Andre Aquiles
Andre Aquiles

Reputation: 404

.icon {
width: 200px;
height: auto;
}

.icon:hover {
filter: invert(100%);
}

.teste {
background-color: lightblue;
}
<div class="teste">
    <img class="icon" src="https://image.flaticon.com/icons/svg/358/358269.svg">
</div>

On hover just add 

.icon:hover {
filter: invert(100%);
}

Upvotes: 4

Related Questions