Responsive landing Page

Community feedback

• 

  Minh Khang Tran•510

  @MinhKhangTranPosted over 2 years ago

  Hi Agatha, nice solution!

  If you want to change the color of the svg icons on hover you should use the svg tag instead of img tag.

  You can find the svg "code" if you open the .svg file in your text editor. For example the facebook icon.

  HTML

  Before:

  <li><a href=""><img src="images/icon-facebook.svg" alt=""></a></li>
  

  After:

  <li>
    <a href="">
        <svg width="20" height="20"       
  xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
    </a>
  </li>
  

  And then you can use css to change the fill attribute of the svg. CSS:

  a:hover svg path{
    fill:red;
  }
  

  Marked as helpful

  2

  ---

  

  Agatha SB•30

  @agatha-sbPosted over 2 years ago

  @MinhKhangTran Thank you for the feedback! This helped me a lot, I've changed my code accordingly :)

  0
• 

  gusfoca•170

  @gusfocaPosted over 2 years ago

  You can also use the css filter property and change the icon's brightness:

  .icon:hover { filter: brightness(8); }

  Or directly change the color with this set of functions:

  .footer-logo { filter: brightness(0.3) sepia(1) hue-rotate(120deg) saturate(6); }

  Which changes the logo's color through filter instead of setting the background color.

  Marked as helpful

  1

  ---

  

  Agatha SB•30

  @agatha-sbPosted over 2 years ago

  @gusfoca thank you! I will surely use this in my future projects. :)

  0