how to auto center an image in a div, when he is resized

user_18696663 0
Viewed 80

I'm making a site that contains some cards of discord users. I put the avatar in a div, and when I hover this, the image expands, but it is going more to the left. I put a border in the card example below to better visualization:

If you see on the right of image when hovered, it is getting closer to the left of the box, while on the left it is fixed. Does anyone know how to make it self-center when it expands, or else, when it goes over, the width of the box also increases along with the height, which already is it increasing automatically in this code?

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  margin: 0px;
}

#accounts {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.acc {
  display: inline-block;
  padding: 60px;
  border-style: solid;
  border-width: 1px;
  border-color: aqua;
  width: 200px;
}

.icons {
  border-radius: 50%;
  width: 200px;
  transition: 0.75s;
  object-fit: contain;
  overflow: hidden;
}

.icons:hover {
  width: 250px;
}

.nick {
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

#nc1 {
  margin-right: 13px;
}

#nc2 {
  margin-left: 9px;
}

#sc-btn {
  background-color: black;
  display: flex;
  justify-content: center;
  text-align: center;
}

#sc-btn a:visited {
  text-decoration: none;
}

#sc-btn a {
  text-decoration: none;
  margin-right: 8px;
  border-radius: 30px;
}

#server-button {
  padding: 0;
  width: 250px;
  height: 50px;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 30px;
  border-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.75s;
}

#sv-btn-text {
  font-weight: 100;
  font-size: 28px;
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0px;
  padding: 0px;
  transition: 0.75s;
}

#server-button:hover {
  background-color: white;
}

#server-button:hover #sv-btn-text {
  color: black;
}
<div id="accounts">
  <div class="acc" id="luiz">
    <a href="https://instagram.com/luizzz28_" target="_blank">
      <img class="icons" src="https://images-ext-1.discordapp.net/external/YBEo2ls8xQBT9HVGHsYwkZm3dddiQNZ_njgmk7kHClc/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/707608125825482894/7c8b1fc2a14f2b47122bb3ac5c5bedb1.png">
    </a>
    <h2 class="nick" id="nc1">luizzz#0001</h2>
  </div>
  <div class="acc">
    <a href="https://instagram.com/dmn.juniorr" target="_blank">
      <img class="icons" src="https://cdn.discordapp.com/avatars/799372092108832778/6788af224fd81da075b0b05f4e42d4a6.png?size=1024">
    </a>
    <h2 class="nick" id="nc2">juniorr ƉємƠη#5456</h2>
  </div>
</div>

<section id="sc-btn">
  <a href="https://discord.gg/tcQhcVG">
    <div id="server-button">
      <h1 id="sv-btn-text">demoninhos</h1>
    </div>
  </a>
</section>

<div id="lateral-menu"></div>

css html
2 Answers

Instead of using the width attribute on hover, try using the transform: scale() attribute and using the transform-origin attribute set to the center. You can use pixels, or percent, or whatever with the transform, I just picked a number for the example. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;

}

body {
    background-color: black;
    margin: 0px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  margin: 0 auto;
}

.accounts {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.acc {
    display: inline-block;
    padding: 60px;
    border-style: solid;
    border-width: 1px;
    border-color: aqua;
    width: 200px;
    height: 250px;
    margin: 0 0;
}

.icons {
    border-radius: 50%;
    width: 200px;
    transition: 0.75s;
    object-fit: contain;
    overflow: hidden;
}

.icons:hover {
    transform-origin: center;
    transform: scale(1.2);
    padding-bottom: 15px;
    }

.nick {
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    white-space: nowrap;
}

#nc1 {
    margin-right: 13px;
}

#nc2 {
    margin-left: 9px;
}

#sc-btn {
    background-color: black;
    display: flex;
    justify-content: center;
    text-align: center;
}

#sc-btn a:visited {
    text-decoration: none;
}

#sc-btn a {
    text-decoration: none;
    margin-right: 8px;
    border-radius: 30px;
}


#server-button {   
    padding: 0;
    width: 250px;
    height: 50px;
    border-style: solid;
    border-width: 1.5px;
    border-radius: 30px;
    border-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.75s;
}

#sv-btn-text {
    font-weight: 100;
    font-size: 28px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    margin: 0px;
    padding: 0px;
    transition: 0.75s;
}



#server-button:hover {
    background-color: white;
}

#server-button:hover #sv-btn-text {
    color: black;
}
<html lang="pt-BR">
    <head> 
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>$$$$$</title>
        <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
        <link rel="icon" type="image/x-icon" href="./src/favicon.ico">
    </head>
    <body>
    <div class="container">
        <div class="accounts">
            <div class="acc" id="luiz">
                <a href="https://instagram.com/luizzz28_" target="_blank">
                    <img class="icons" src="https://images-ext-1.discordapp.net/external/YBEo2ls8xQBT9HVGHsYwkZm3dddiQNZ_njgmk7kHClc/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/707608125825482894/7c8b1fc2a14f2b47122bb3ac5c5bedb1.png">
                </a>
                <h2 class="nick" id="nc1">luizzz#0001</h2>
            </div>
            </div>
       <div class="accounts">
            <div class="acc">
                <a href="https://instagram.com/dmn.juniorr" target="_blank">
                    <img class="icons" src="https://cdn.discordapp.com/avatars/799372092108832778/6788af224fd81da075b0b05f4e42d4a6.png?size=1024">
                </a>
                <h2 class="nick" id="nc2">juniorr ƉємƠη#5456</h2>
            </div>
        </div>
           </div>
        <section id="sc-btn">
            <a href="https://discord.gg/tcQhcVG">
                <div id="server-button">
                    <h1 id="sv-btn-text">demoninhos</h1>
                </div>
            </a>
        </section>

        <div id="lateral-menu"></div>  
    </body>
</html>

user_85650100

For CSS:

background-image: background-posution: center;

For img:

<div align=center><img src=... style=width:50vw;></div>
user_188899970
Related