Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to the left side. To illustrate this issue, I have added a border to the card in the example below:

Upon hovering over the image, you'll notice that it moves closer to the left edge of the box rather than centering itself. Is there a way to make the expanded image self-center within the card? Alternatively, is it possible for the width of the box to increase proportionally along with the height as the image expands?

@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;
}
htmlcss

Answer №1

Instead of utilizing the width attribute when hovering, consider using the transform: scale() attribute along with the transform-origin attribute set to the center. You have the flexibility to use pixels, percentages, or any other unit with the transform property. For demonstration purposes, a number was arbitrarily chosen. More information can be found 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>

Answer №2

In regards to CSS:

background-image: background-posution: center;

When using an image tag:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble adjusting opacity with CSS in @media queries for maximum width restrictions

When building a webpage with a collapsible header and a fading large logo that transitions to a smaller version in a different location upon scrolling down on the desktop view, there seems to be an issue. The smaller logo's opacity property does not r ...

csstwitter-bootstrapresponsive-designmedia-queriesbootstrap-5

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Using jQuery to insert HTML content into a div element by replacing a specific string

I am faced with a situation where I have <div class="test">hello everyone</div> and the challenge is to replace each instance of "hello" within this div with <h1>helllo</h1> In my attempt, I used $(this).text().replace("hello" ...

jqueryhtml

Effortlessly browse through directory with the seamless integration of AngularJS or

Hey there! I'm working on a really cool feature - creating a list with editable inputs. However, I've encountered a bit of an issue. Is there any way to navigate through this list using arrow keys and focus on the desired input? .content ul { ...

javascripthtmlangularjs

What is the best way to implement an object literal method for making an HTTP GET request to retrieve JSON data?

I'm facing an issue with the HTTP GET method when trying to retrieve JSON data. Although the HTTP GET method is successfully fetching the JSON data, I'm struggling to connect it with the object literal. For better clarity, here's the specif ...

htmljsonangularjsget

What is the best way to align text within both the grid row and column while still maintaining the border?

When I apply justify-self and align-self rules, it successfully centers items vertically and horizontally. However, the issue arises when the borders wrap around the text instead of expanding all the way to the edges. My goal is to have a 1px border aroun ...

htmlcsschartscss-grid

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

Creating a static line or separator based on the content using HTML and CSS

Is there a way to adjust the height of a line or divider based on the content of either the left or right section? For instance, if we have a left panel and a right panel, and we draw a line or divider on the left side panel, is it possible for the line ...

htmlcss

The paths of youngsters and the application of conditional styling

Here is the scenario I am dealing with: <div class="parent"> <div class"routeA"> <div class="header"> <li></li> <li class="p-highlight"></li& ...

csssass

Remove the input box for submission from the HTML code

How can I remove the 'button' from my input field and replace it with an image? Even after trying different methods, the box still appears. Thank you. <!DOCTYPE html PUBLIC ""> <head> <style> #PlusMinus{background:url(&apo ...

jqueryhtmlcss

When resizing, Bootstrap sidebar causes content overlapping

I am facing a problem that I am unable to resolve. The issue is with the top bar and side bar on my webpage. When the page is resized, the sidebar moves to an absolute position just below the top bar, causing it to overlap my content. Below is my CSS code ...

twitter-bootstrapcsstwitter-bootstrap-3

Can HTML code be saved in "context" and then utilized in one of the templates?

I am striving to extract the code of a table from another website using selenium, save it in the context dictionary, and then embed it into one of the templates so that it seamlessly becomes part of the page's HTML structure without displaying the cod ...

pythonhtmldjangoselenium

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Using the "img" tag with only a width value in CSS will automatically calculate the height proportionally. However, finding the height value using developer tools or jQuery's height() method may not work as expected. See the example below: HTML code ...

jquerycssimageheightwidth

HTML Error: The result is unspecified

I have written a function that is supposed to return 105; 6.5 and 110; 4.5, but instead it returns undefined: undefinedundefined: undefined. Can someone please advise me on what changes I need to make to get the correct results? I have heard about asynchro ...

javascripthtmlmongodbmeteorundefined

Placing a pseudoelement amidst the track and thumb of a range input type

I'm trying to position a pseudo element with a specific z index that is lower than the thumb of an input type range but higher than its track. This is what I have so far: HTML: <div class="range"> <input type="range" name="" class="progre ...

csshtmlz-index

From dividing into three sections to splitting into two sections

Struggling to create a list of images and descriptions in sets of threes at larger widths, transitioning to twos at smaller widths? The breakdown is causing chaos. Need help achieving clean one-half columns. Appreciate any assistance! ...

htmlcssimage

Automatic padding within Bootstrap5

I'm struggling to understand why I am experiencing a consistent padding at the bottom of my container in Bootstrap5. I attempted to use align-items-center within the row to center the content, but it had no effect. <!DOCTYPE html> <html la ...

cssbootstrap-5

Comparing Canvas and CSS3 for Website Development

Many discussions focus on comparing games with high levels of interaction, but my project involves a web application that manipulates objects individually. These objects can be images or text, and they can be replaced, resized, rotated, zoomed in, and dele ...

javascripthtmlcsscanvas

Modify components in a web application based on the content of a JavaScript variable

I'm in the process of developing a webapp that needs to interact with an Arduino for its inputs in order to dynamically change the contents of the webpage. Currently, I am experimenting with variables that I have created and assigned random numbers t ...

javascripthtmljquerycssnode.js

Is there a way to stabilize a section or content that bounces as I scroll?

Whenever I scroll up or down, there is a section on my page where I have implemented scroll magic. However, as I scroll through this section, it starts to jump until it reaches the position where I want it to be with transform:translateY(0). I am unsure h ...

javascriptjquerycssscrollmagic