All comments

@ArchieK9Submitted over 1 year ago

I need help in creating a hover effect on the social icons to turn it blue, please I need help. And if you know any way to improve my codes on the website please let me know

clipboard-landing-page-master

Augustine Asare•120

@AustinKing5Posted over 1 year ago

-You need insert your image into your HTML file using the svg path. -Change the fill property to currentColor ( fill="currentColor") like i have done bellow. NB: before you change the existing fill value ( fill="#4c545c") which you will use later in your css.

<svg class="icons-adjustment" width="24" height="20" xmlns="http://www.w3.org/2000/svg">
<path
d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"
fill="currentColor" fill-rule="nonzero" />
</svg>

In your css target your "svg" element and change the color value to "#4c545c" which you copied earlier. Now use the :hover pseudo class to create the hover state as it has been demonstrated below.

svg {
color: #4c545c;
}

svg:hover {
color: #26baa4;
}

Marked as helpful

Augustine Asare•120
@AustinKing5Submitted about 2 years ago
Ireally struggled with styling "divs". I want to know if there sre any rules regarding when and when not to use divs in my HTML structure/ I am newbie so any words of encourage will come a long way to help my development.
Product Preview Page with HTML and CSS
2
Augustine Asare•120
@AustinKing5Posted about 2 years ago
@AtulKumar0001 Thank you so much for your feedback. I will checkout the resources you provided and continue my learning process.
0

Augustine Asare

All comments

clipboard-landing-page-master

Product Preview Page with HTML and CSS