title: change opacity SVG with css with hover
body: <p>i have a problem with my css.</p>
  
  <p>this is my html:</p>
  
  <pre><code>&lt;nav id="navigation"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a class="navbtn" href="?page=contact"&gt;
              &lt;img src="images\navigation\icons\contact.svg" width="25px"&gt;
                  &lt;p&gt;contact&lt;/p&gt;      
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>this is my css:</p>
  
  <pre><code>#navigation ul:nth-child(1) li a:hover {
  text-shadow: 0px 0px 20px black;
  opacity: 1.0;
  
  }
  
  .iconopacity {
      fill-opacity: 0.3;
  }
  
  .iconopacity:hover {
      pointer-events: all;
      fill-opacity: 0.7 !important;
  }
  </code></pre>
  
  <p>this is my svg file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;?xml-stylesheet type="text/css" href="http://localhost/project0/html/css/stylesheet.css" ?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="original_path" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
       y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"&gt;
  &lt;!----------- This path -----------&gt;
  &lt;path class="iconopacity" id="orignil_path" fill-rule="evenodd" clip-rule="evenodd" d="M0,225C0,161.667,0,98.333,0,35
      c85.333,0,170.667,0,256,0c0,63.333,0,126.667,0,190C170.668,225,85.334,225,0,225z M25.332,202.221c68.432,0,136.932,0,204.402,0
      c-21.992-22.172-44.305-44.666-67.131-67.68c-11.23,8.526-22.83,17.333-34.676,26.326c-12.121-9.238-23.702-18.064-34.823-26.539
      C70.061,157.412,47.765,179.749,25.332,202.221z M224.938,57.804c-65.219,0-128.867,0-193.869,0
      c32.862,25.143,64.67,49.479,96.9,74.138C160.271,107.245,192.09,82.918,224.938,57.804z M72.994,118.891
      c-16.509-12.629-32.893-25.163-50.122-38.343c0,30.421,0,59.434,0,88.337C39.514,152.285,55.936,135.905,72.994,118.891z
       M233.225,168.928c0-28.898,0-57.963,0-88.462c-17.469,13.359-33.963,25.973-50.109,38.32
      C200.168,135.85,216.629,152.321,233.225,168.928z"/&gt;
  &lt;g id="shadow"&gt;
      &lt;defs&gt;
          &lt;path id="mask_layer" d="M0,225C0,161.667,0,98.333,0,35c85.333,0,170.667,0,256,0c0,63.333,0,126.667,0,190
              C170.668,225,85.334,225,0,225z M25.332,202.221c68.432,0,136.932,0,204.402,0c-21.992-22.172-44.305-44.666-67.131-67.68
              c-11.23,8.526-22.83,17.333-34.676,26.326c-12.121-9.238-23.702-18.064-34.823-26.539
              C70.061,157.412,47.765,179.749,25.332,202.221z M224.938,57.804c-65.219,0-128.867,0-193.869,0
              c32.862,25.143,64.67,49.479,96.9,74.138C160.271,107.245,192.09,82.918,224.938,57.804z M72.994,118.891
              c-16.509-12.629-32.893-25.163-50.122-38.343c0,30.421,0,59.434,0,88.337C39.514,152.285,55.936,135.905,72.994,118.891z
               M233.225,168.928c0-28.898,0-57.963,0-88.462c-17.469,13.359-33.963,25.973-50.109,38.32
              C200.168,135.85,216.629,152.321,233.225,168.928z"/&gt;
      &lt;/defs&gt;
      &lt;clipPath id="mask_layer_1_"&gt;
          &lt;use xlink:href="#mask_layer"  overflow="visible"/&gt;
      &lt;/clipPath&gt;
      &lt;g id="shadow_layer" opacity="0.7" clip-path="url(#mask_layer_1_)"&gt;
  
              &lt;image overflow="visible" opacity="0.7" width="358" height="330" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWYAAAFKCAYAAAAuSPVbAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
  GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAOOJJREFUeNrsnQtz4sqShEtC4PHM
  /f+/dM+MDUjanVj6nnJSj5YAI4nMCAV+zthY+khlV1eJ&lt;!----- very long list of characters ------&gt;rwAB4G1SmkeE/2QAAAABJRU5ErkJggg==" transform="matrix(1 0 0 1 -56 -29)"&gt;
          &lt;/image&gt;
          &lt;g&gt;
              &lt;g&gt;
                  &lt;path d="M224.938,57.804c-65.219,0-128.867,0-193.869,0c32.862,25.143,64.67,49.479,96.9,74.138
                      C160.271,107.245,192.09,82.918,224.938,57.804z"/&gt;
                  &lt;path d="M233.225,168.928c0-28.898,0-57.963,0-88.462c-17.469,13.359-33.963,25.973-50.109,38.32
                      C200.168,135.85,216.629,152.321,233.225,168.928z"/&gt;
                  &lt;path d="M127.928,160.867c-12.121-9.238-23.702-18.064-34.823-26.539c-23.044,23.084-45.34,45.421-67.773,67.893
                      c68.432,0,136.932,0,204.402,0c-21.992-22.172-44.305-44.666-67.131-67.68C151.373,143.067,139.773,151.874,127.928,160.867z"/&gt;
                  &lt;path d="M22.873,80.548c0,30.421,0,59.434,0,88.337c16.641-16.6,33.063-32.979,50.122-49.994
                      C56.485,106.262,40.102,93.728,22.873,80.548z"/&gt;
                  &lt;path d="M-38-18.333V275h321.333V-18.333H-38z M256,225c-85.332,0-170.666,0-256,0C0,161.667,0,98.333,0,35
                      c85.333,0,170.667,0,256,0C256,98.333,256,161.667,256,225z"/&gt;
              &lt;/g&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I made the icon with illustrator. I want to make the icon a little bit darker, by decreasing the transparancy when the mouse hovers over the icon. I tried it with:</p>
  
  <pre><code>.iconopacity:hover {
       fill-opacity: 0.7; 
  }
  </code></pre>
  
  <p>but it didn't work. i also tried it with a bunch of other css selectors like:</p>
  
  <pre><code>  #navigation ul:nth-child(1) li a:hover .iconopacity { css here }
  </code></pre>
  
  <p>but it didn't work either.</p>
  
  <p>I think i'm selecting the path wrong with my css while hovering over the link, but the problem could also be something entirely different.</p>
  
  <p>I think the problem could also be solved by using javascript, but i'm not in to javascript, and i think it should be possible to do with css.</p>
  
  <p>please help me? :)</p>