Submitted over 3 years ago

Ping comming soon master HTML CSS

PecheMelba•610

@PecheMelba

A solution to the Ping single column coming soon page challenge

Preview Code

Solution retrospective

Hi everyone,

12th challenge from Frontend Mentor. I couln'd find a clean way to have the social button hover in blue. I tried use filter css and fill and event change the svg file to put in blue. ^^" Also if someone has an idea about how to avoid my layout "jumping" when the error message appears I'm in.

Thanks : )

Code

Please log in to post a comment

Community feedback

Mark Mitchell•1,820
@markup-mitchell
Posted over 3 years ago
For your social buttons, instead of using <img src="[icon.svg]"> you can inline the SVG - that is, just embed the whole <svg class="icon"></svg> right in your markup.

Then you can target it with CSS just like any other element and manipulate its properties:
```
svg.icon {
    transition: all 0.2s ease;
}
svg.icon:hover {
    fill: blue;
    transition: all 0.3s ease;
}
```
demo

Note that you might need to remove "style" attributes from your SVG to give control to the CSS - inline attributes will override class properties like any HTML element.

You can do all kinds of fun things with this technique!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord