Center SVG correctly with Path-CodePudding

Icons are a handicap for me within Web Development and I am trying to polish that a bit by giving myself some exercises to work on.

I am trying to center an icon here that will appear when the image is hovered over.

This is what I have so far, but getting this "eyeball" icon to center is a really big pain in the kiester!

I tried display: flex, justify-content: center, and align-items: center on the paretn DIV and even text-align: center on the icon class itself, but it just sits there giving me the finger!

So, here I am asking for help on this because y'all are the BEST apparently on the interweb for this kinda stuff!

Your help is much appreciated!

/**** All Universal Styles Go Here ****/

:root {
  --BodyBackgroundColor: hsl(217, 54%, 11%);
  --CardContainerBackground: hsl(216, 50%, 16%);
  --CardHeading: hsl(0, 0%, 100%);
  --CardPrimary: hsl(215, 51%, 70%);
  --CardFont: "Outfit";
  --CardSec2Icon1Text: hsl(178, 100%, 50%);
  --CardSec2Icon2: hsl(178, 100%, 50%);
  --CardSec3Border: hsl(215, 32%, 27%);
  --CardSec3Txt2: hsl(0, 0%, 100%);
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--BodyBackgroundColor);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
}


/*      Specific Section Styles Go Here      */


/**** Card Container Styles ****/

.card-container {
  max-width: 100%;
  border-radius: 24px;
  margin: 6% 0 0 0;
  width: 400px;
}


/**** Section 1 Styles ****/

.card-container-sec-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: auto;
}

.card-container-sec-1-img {
  max-width: 100%;
  width: 90%;
  border-radius: 12px;
  margin: 6%;
}

.card-container-sec-1-img-overlay {
  position: relative;
  max-width: 100%;
  width: 360px;
  height: 360px;
  opacity: 0;
  transition: 0.5s ease;
  background-color: white;
  border-radius: 12px;
  top: -380px;
}

.card-container-sec-1-img-overlay:hover {
  opacity: 0.6;
  transition: 0.5s ease;
  background-color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />

  <link rel="stylesheet" href="./css/main.css" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet" />

  <title>
    CreatiqueMedia | Ron The Web Dev | Post 0005-20220910 - Card Component 4
  </title>
</head>

<body>
  <div >
    <section >
      <img  src="./assets/image-equilibrium.jpg" alt="" loading="lazy" decoding="async" />
      <section >
        <svg  alignment-baseline="middle" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
              <path d="M0 0h48v48H0z" />
              <path 
                d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z"
                fill="black"
                fill-rule="nonzero"
              />
            </g>
          </svg>
      </section>
    </section>
  </div>
</body>

</html>

CodePudding user response：

Add the following CSS:

.card-container-sec-1-img-overlay {
  display: flex; /* Added */
  justify-content: center; /* Added */
  align-items: center; /* Added */
}

See the snippet below.

/**** All Universal Styles Go Here ****/

:root {
  --BodyBackgroundColor: hsl(217, 54%, 11%);
  --CardContainerBackground: hsl(216, 50%, 16%);
  --CardHeading: hsl(0, 0%, 100%);
  --CardPrimary: hsl(215, 51%, 70%);
  --CardFont: "Outfit";
  --CardSec2Icon1Text: hsl(178, 100%, 50%);
  --CardSec2Icon2: hsl(178, 100%, 50%);
  --CardSec3Border: hsl(215, 32%, 27%);
  --CardSec3Txt2: hsl(0, 0%, 100%);
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--BodyBackgroundColor);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
}

/*      Specific Section Styles Go Here      */

/**** Card Container Styles ****/

.card-container {
  max-width: 100%;
  border-radius: 24px;
  margin: 6% 0 0 0;
  width: 400px;
}

/**** Section 1 Styles ****/

.card-container-sec-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: auto;
}

.card-container-sec-1-img {
  max-width: 100%;
  width: 90%;
  border-radius: 12px;
  margin: 6%;
}

.card-container-sec-1-img-overlay {
  position: relative;
  max-width: 100%;
  width: 360px;
  height: 360px;
  opacity: 0;
  transition: 0.5s ease;
  background-color: white;
  border-radius: 12px;
  /* top: -380px; */ /* Removed */
  display: flex; /* Added */
  justify-content: center; /* Added */
  align-items: center; /* Added */
}

.card-container-sec-1-img-overlay:hover {
  opacity: 0.6;
  transition: 0.5s ease;
  background-color: white;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />

    <link rel="stylesheet" href="./css/main.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet" />

    <title>
      CreatiqueMedia | Ron The Web Dev | Post 0005-20220910 - Card Component 4
    </title>
  </head>

  <body>
    <div >
      <section >
        <img  src="./assets/image-equilibrium.jpg" alt="" loading="lazy" decoding="async" />
        <section >
          <svg  alignment-baseline="middle" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
              <path d="M0 0h48v48H0z" />
              <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="black" fill-rule="nonzero" />
            </g>
          </svg>
        </section>
      </section>
    </div>
  </body>

</html>