I'm trying to change the width and height of a container using :hover in CSS, but it isn't working. What am I doing wrong?

JasonI2244
June 13, 2023
217 views
0 votes
2 Answers

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!

.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;
}

<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>

I expected to get what I’ve shown in the example images, but I ended up with nothing; both the circle and icon are not visible on the page.

Tags: css hover

Answers

Solution:

Hello. It works when you remove the flexbox (display: flex and flex-content) AND replace .twitter-icon-svg:hover .twitter-footer-media-circle with .twitter-footer-media-circle:hover in the CSS.

Note: Flexbox can get really buggy with the HTML is the layout is complex.

Here is a functioning snippet of the successful version (looks wonky after removing flexbox, but works):

.footer-media-container {
  position: relative;

  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 {

  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-footer-media-circle:hover {
  transition: 0.25s;
  background-color: #1DA1F2;
  width: 45px;
  height: 45px;
}

    <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>

Apart from the flexbox bug, that is indeed strange behavior, since it should have worked the other way. It is not because you have two different class depending on .twitter-icon-svg:hover, as I had tested that theory out. So, my hypothesis is that it has something to do with your .twitter-footer-media-circle.

You’re currently resizing the svg’s parent element resulting in a cropped icon.

You could instead draw the background circle as a absolutely positioned pseudo element.

.twitter-footer-media-circle:before{
  content:"";
  display:block;
  position: absolute;
  background-color: #1DA1F2;
  border-radius: 50%;
  transition: 0.25s;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  z-index:-1;
  transform: scale(0.1)
}

.twitter-footer-media-circle {
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.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-footer-media-circle:hover:before {
  background-color: #1DA1F2;
  transform: scale(1)
}

<div class="footer-media-container">
  <div class="twitter-footer-media-circle">
    <svg class="twitter-icon-svg" 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>

Alternative: add background circle to your svg.

.twitter-icon-svg {
  height: 50px;
  width: auto:
}

.height-5em{
  height: 5em;
}

.twitter-icon-svg>* {
  transition: 0.25s;
}

.twitter-icon-circle {
  fill: #1DA1F2;
  fill-opacity: 0
}

.twitter-icon-svg:hover .twitter-icon-circle {
  transform: scale(1);
  fill-opacity: 1
}

.twitter-icon-svg:hover .twitter-icon-path {
  fill: #fff
}

<svg class="twitter-icon-svg" viewBox="0 0 500 500">
      <circle class="twitter-icon-circle" cx="50%" cy="50%" r="50%" transform="scale(0.1)" transform-origin="250 250" />
      <path class="twitter-icon-path"
        fill="#222249" stroke="#222249" stroke-width="1"
        d="m 250 190 c -1.5 -3.8 -2.3 -12.8 -2.3 -16.5 c 0 -24 11.3 -47.3 30.8 -61.5 c 12.8 -9.8 28.5 -14.3 44.3 -15 c 3.8 0 4.5 0 7.5 0.8 c 12 0.8 21.8 3.8 32.3 9.8 c 3.8 2.3 7.5 4.5 10.5 7.5 c 2.3 2.3 4.5 5.3 7.5 5.3 c 2.3 0.8 11.3 -2.3 14.3 -3 c 17.3 -6 16.5 -6.8 32.3 -14.3 c -3 10.5 -11.3 23.3 -18.8 30.8 c 0 0 -13.5 11.3 -13.5 11.3 c 0 0 14.3 -3 14.3 -3 c 11.3 -2.3 17.3 -4.5 27.8 -9 c -3.8 8.3 -18 23.3 -24.8 29.3 c 0 0 -11.3 9.8 -11.3 9.8 c -1.5 2.3 -0.8 7.5 -0.8 9.8 c 0 0 -0.8 14.3 -0.8 14.3 c 0 18 -8.3 48.8 -15 66 c -12 29.3 -30 57.8 -53.3 79.5 c -35.3 33 -76.5 50.3 -123.8 54.8 c 0 0 -15 1.5 -15 1.5 c -34.5 0.8 -63 -3.8 -94.5 -18 c -7.5 -3 -23.3 -10.5 -29.3 -15.8 c 0 0 9 0.8 9 0.8 c 0 0 14.3 0 14.3 0 c 21 0 43.5 -6.8 62.3 -16.5 c 7.5 -3.8 20.3 -10.5 25.5 -16.5 c -19.5 0 -39.8 -8.3 -53.3 -22.5 c -8.3 -9.8 -12.8 -17.3 -17.3 -29.3 c 11.3 0.8 23.3 3 33.8 -2.3 c -7.5 -0.8 -16.5 -4.5 -23.3 -9 c -24 -14.3 -36.8 -37.5 -36.8 -65.3 c 0 0 9.8 3.8 9.8 3.8 c 6 2.3 18 6 24 4.5 c -7.5 -3.8 -15 -12 -19.5 -18.8 c -16.5 -22.5 -19.5 -57.8 -3.8 -81.8 c 0 0 8.3 9 8.3 9 c 7.5 7.5 15 15 23.3 21.8 c 30 24 64.5 40.5 102.8 45.8 c 7.5 1.5 14.3 2.3 22.5 2.3 z" />
    </svg>
    
    
<svg class="twitter-icon-svg height-5em" viewBox="0 0 500 500">
      <circle class="twitter-icon-circle" cx="50%" cy="50%" r="50%" transform="scale(0.1)" transform-origin="250 250" />
      <path class="twitter-icon-path"
        fill="#222249" stroke="#222249" stroke-width="1"
        d="m 250 190 c -1.5 -3.8 -2.3 -12.8 -2.3 -16.5 c 0 -24 11.3 -47.3 30.8 -61.5 c 12.8 -9.8 28.5 -14.3 44.3 -15 c 3.8 0 4.5 0 7.5 0.8 c 12 0.8 21.8 3.8 32.3 9.8 c 3.8 2.3 7.5 4.5 10.5 7.5 c 2.3 2.3 4.5 5.3 7.5 5.3 c 2.3 0.8 11.3 -2.3 14.3 -3 c 17.3 -6 16.5 -6.8 32.3 -14.3 c -3 10.5 -11.3 23.3 -18.8 30.8 c 0 0 -13.5 11.3 -13.5 11.3 c 0 0 14.3 -3 14.3 -3 c 11.3 -2.3 17.3 -4.5 27.8 -9 c -3.8 8.3 -18 23.3 -24.8 29.3 c 0 0 -11.3 9.8 -11.3 9.8 c -1.5 2.3 -0.8 7.5 -0.8 9.8 c 0 0 -0.8 14.3 -0.8 14.3 c 0 18 -8.3 48.8 -15 66 c -12 29.3 -30 57.8 -53.3 79.5 c -35.3 33 -76.5 50.3 -123.8 54.8 c 0 0 -15 1.5 -15 1.5 c -34.5 0.8 -63 -3.8 -94.5 -18 c -7.5 -3 -23.3 -10.5 -29.3 -15.8 c 0 0 9 0.8 9 0.8 c 0 0 14.3 0 14.3 0 c 21 0 43.5 -6.8 62.3 -16.5 c 7.5 -3.8 20.3 -10.5 25.5 -16.5 c -19.5 0 -39.8 -8.3 -53.3 -22.5 c -8.3 -9.8 -12.8 -17.3 -17.3 -29.3 c 11.3 0.8 23.3 3 33.8 -2.3 c -7.5 -0.8 -16.5 -4.5 -23.3 -9 c -24 -14.3 -36.8 -37.5 -36.8 -65.3 c 0 0 9.8 3.8 9.8 3.8 c 6 2.3 18 6 24 4.5 c -7.5 -3.8 -15 -12 -19.5 -18.8 c -16.5 -22.5 -19.5 -57.8 -3.8 -81.8 c 0 0 8.3 9 8.3 9 c 7.5 7.5 15 15 23.3 21.8 c 30 24 64.5 40.5 102.8 45.8 c 7.5 1.5 14.3 2.3 22.5 2.3 z" />
    </svg>

In the above example I’ve added a <circle> element in background. It is initially down scaled.

I’ve also scaled the icon itself using svg path editor.

This way you only need to specify the desired width/height of your icon svg.

Please signup or login to give your own answer.

Click here to cancel reply.