Question

I m trying to add a social media banner to the footer of my website. I m using svgs for the actual icons, but I m trying to make a circle which has the background color of the app s logo expand from out of the logo. Like this: Twitter logo without hovering Twitter logo when hovering However, my css isn t working and I m not sure why. Please help!

传真:

<div class="footer-media-container">
      <div class="twitter-footer-media-circle">
        <svg class="twitter-icon-svg"
     width="132.275mm" height="132.275mm"
     viewBox="0 0 500 500">
  <path class="twitter-icon-path"
        fill="#222249" stroke="#222249" stroke-width="1"
        d="M 248.00,170.00
           C 246.45,164.92 245.07,153.37 245.00,148.00
             244.62,115.59 259.85,84.98 286.00,65.75
             303.11,53.17 323.90,46.86 345.00,46.04
             349.55,45.86 350.88,46.42 355.00,46.83
             370.92,48.42 384.14,51.83 398.00,60.20
             402.81,63.11 407.81,66.44 412.00,70.17
             414.81,72.67 418.13,76.94 422.00,77.40
             425.28,77.79 437.34,73.88 441.00,72.67
             464.28,64.93 463.40,63.91 484.00,54.00
             480.20,68.08 469.40,84.89 459.00,94.96
             459.00,94.96 441.00,110.00 441.00,110.00
             441.00,110.00 460.00,106.12 460.00,106.12
             474.80,102.61 482.99,99.94 497.00,94.00
             492.37,104.92 473.08,124.62 464.00,132.83
             464.00,132.83 448.77,146.17 448.77,146.17
             447.31,148.60 448.01,155.86 448.00,159.00
             448.00,159.00 447.00,178.00 447.00,178.00
             446.71,202.44 435.94,243.14 426.80,266.00
             411.20,304.99 386.83,343.19 356.00,371.91
             309.21,415.51 254.21,438.85 191.00,445.17
             191.00,445.17 171.00,447.00 171.00,447.00
             125.13,447.53 87.41,441.57 45.00,423.28
             35.05,418.99 13.53,408.87 6.00,402.00
             6.00,402.00 18.00,403.00 18.00,403.00
             18.00,403.00 37.00,403.00 37.00,403.00
             64.87,402.96 95.26,393.62 120.00,381.25
             129.91,376.29 146.79,367.05 154.00,359.00
             127.80,359.00 101.18,348.45 83.17,328.99
             71.51,316.39 66.20,305.60 60.00,290.00
             74.59,290.67 91.33,293.63 105.00,287.00
             94.53,285.52 83.05,280.78 74.00,275.40
             42.04,256.38 25.00,224.77 25.00,188.00
             25.00,188.00 38.00,193.19 38.00,193.19
             45.90,196.25 61.81,200.95 70.00,199.00
             59.53,193.86 50.34,183.45 43.72,174.00
             22.38,143.51 18.44,96.91 39.00,65.00
             39.00,65.00 50.04,77.00 50.04,77.00
             59.87,87.29 69.90,97.27 81.00,106.20
             120.71,138.12 167.40,159.97 218.00,167.27
             228.35,168.76 237.49,170.00 248.00,170.00 Z" />
</svg>
      </div>
            </div>

CSS:

.footer-media-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 75px;
  width: 180px;
  background-color: none;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
}
.twitter-footer-media-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0px;
  height: 0px;
  background-color: #1da0f200;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  transition: 0.25s;
}
.twitter-icon-svg {
  width: 25px;
  height: 25px;
  transition: 0.25s;
  cursor: pointer;
}
.twitter-icon-svg:hover .twitter-icon-path {
  fill: white;
  stroke: white;
  transition: 0.25s;
}
.twitter-icon-svg:hover .twitter-footer-media-circle {
  transition: 0.25s;
  background-color: #1DA1F2;
  width: 45px;
  height: 45px;
}

我预计会得到我在实例图像中显示的情况,但我最后看不到什么;在网页上看不到圈子和icon。

友情链接