What is the best way to ensure that a piece of content remains stationary while the neighboring content shifts in position?

Hello there! I'm currently working on my very first HTML and CSS project, and one of the tasks involves aligning 4 icons side by side horizontally. The goal is to have the icons "grow" a bit when the mouse hovers over them. However, I've encountered an issue where the border grows on hover, causing the other icons to shift around due to maintaining margin space. I only want the icon that my cursor is hovering over to move. I've spent the past 3 hours searching for a solution with no luck so far. I hope that explanation was clear enough. Below is the code snippet from my HTML and CSS:

.icones {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: solid #ffffff;
  box-sizing: content-box;
  height: 70px;
}

.icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  border: solid red;
}

.icons a:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  padding: 15px;
}
<div class="icones">
  <div class="icons">
    <a href="http://" target="_blank">
      <ion-icon name="logo-github"></ion-icon>
    </a>
    <a href="http://" target="_blank">
      <ion-icon name="logo-whatsapp"></ion-icon>
    </a>
    <a href="http://" target="_blank">
      <ion-icon name="logo-instagram"></ion-icon>
    </a>
    <a href="http://" target="_blank">
      <ion-icon name="logo-discord"></ion-icon>
    </a>
  </div>
</div>

htmlcsscss-positionmargins

Answer №1

Utilize the scale property within the :hover selector (and add a transition for a smooth animation).
Avoid adjusting the padding or margin properties on hover, consider using gap instead.

.icons a {
  /* Add default styles here ... */
  transition: scale 0.3s;
}

.icons a:hover {
  /* Include hover styles here ... */
  scale: 1.5;
}

See an example below:

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  gap: 1rem; /* Consider using this instead of margin */
}

.icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  border: solid red;
  text-decoration: none;
  
  transition: scale 0.3s, border-radius 0.3s;
}

.icons a:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  
  scale: 1.5;
}
<div class="icons">
  <a href="http://" target="_blank">🌞</a>
  <a href="http://" target="_blank">🤓</a>
  <a href="http://" target="_blank">🚀</a>
  <a href="http://" target="_blank">❤️</a>
</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

Struggling to fix the excess white space appearing underneath my website

I am new to HTML/CSS and I'm currently working on adding a timeline to my website. However, I've encountered a strange issue with the #timeline class where there is an odd block of space below it whenever I try to adjust the height. So far, I ha ...

htmlcssuser-interface

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

I am currently working on constructing a graph that illustrates the data for the Amount of Resources utilized Per Project by creating a bar graph. I am aiming to customize the colors of the bars so that each one has its own unique color. Currently, the col ...

javascripthtmlcssd3.jsvisualization

Angular directive specifically meant for the parent element

I am working on a directive that I need to apply to a specific div element without affecting its child elements. The goal is to make the main div draggable, so that when it moves, its child divs move along with it. However, I do not want the child divs to ...

javascripthtmlangularjsangularjs-directive

Implement automatic data replacement using PHP and MySQL triggers

The code provided below pertains to postar.php file include "conexao.php"; $consulta = mysqli_query($conexao, "SELECT titus.titus, titus.des, titus.link from titus"); while($postagem = mysqli_fetch_object($consulta)); echo "<d ...

phphtmlmysql

What is the best way to assign a URL to an image source using a JavaScript variable?

I am working on a script that displays different image URLs based on the time of day using an if-else statement. I want to dynamically load these images in an img src tag so that a different picture is loaded for each time of day. I have defined variables ...

javascripthtmlsrc

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

I have created a multi-select checkbox form, and I've added some JavaScript to ensure that the visitor selects at least one option <div class="form-group options"> <label class="control-label col-md-4" for="optiontext">Specify an option&l ...

javascriptphpjqueryhtml

Implementing jQuery selector for CSS and properly handling special characters in the code

I've been attempting to use jQuery to change the background color of a radio button. I provided the CSS code below, but even after escaping special characters in jQuery as shown below, the solution still isn't working. #opt5 > [type="radio"]: ...

javascriptjquerycssjquery-selectorscss-selectors

Applying CSS styles to my container through a button click event

Currently, I am attempting to apply a padding-top to my container when a button is clicked. Unfortunately, the padding-top is not being added as expected. $('#login').on('click', function(){ $('#loginform1').css('padd ...

jquerycss

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

Whenever I try to execute watir-webdriver, I notice that the CSS file is

Currently, I am in the process of learning how to utilize watir-webdriver in ruby for my QA tasks. However, a recurring issue arises when running my watir-webdriver scripts on certain sites - some pages have missing CSS Files. This particular problem seems ...

cssrubyseleniumwatir

Exploring the possibilities of ReactJS and the sleek design of

How can I alter the background color of a RaisedButton without having the CSS class name appear in the autogenerated div? Here is the button: <RaisedButton className="access-login" label="Acceder" type="submit"/> This is the specified CSS: .acces ...

javascriptcssreactjsmaterial-ui

Show User-Uploaded Image on Redirected Webpage with Flask and html

My goal is to develop a webpage where users can submit an image, and upon submission, they are redirected to a new page displaying the rendered image. I have referenced the code from How to pass uploaded image to template.html in Flask for guidance, but un ...

pythonhtmlformsflaskrequest

The GET method is designed to automatically eliminate any trailing whitespace in the

Whenever I utilize the GET method to transmit a text to the server, like 'abc ', I notice that the whitespace characters at the end are always removed. As a result, the server receives 'abc' instead of 'abc ' My question is w ...

htmlgetwhitespace

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

Currently facing a peculiar issue within a Cordova app, specifically on iOS. The scenario is: I have an HTML page with existing content. At a later stage, I fetch additional HTML from a remote source and inject it into the original HTML page. However, whe ...

javascripthtmlioscordovaiframe

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

I have a situation where I have multiple forms on one page and am utilizing the jQuery Form plugin to manage them without having to reload the entire page. The issue arises when I need some sort of visual feedback to indicate whether the form submission wa ...

javascriptjqueryhtmlforms

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

Horizontal JQuery Slider for CategoriesDiscover the smooth, sleek category navigation with

Looking to create a sliding horizontal menu with various categories using a clever div layer setup. The goal is to have one fixed-width div containing another wider div, with only a portion of the second one visible at a time. Encountering two challenges ...

jqueryhtmlslider

Is there an issue with this website link?

What is causing the Xul app to display the error message: XML Parsing Error: not well-formed when encountering this code snippet: <browser class="AppBar" type="content" src="test.html?img1=img1.jpg&img2=img2.jpg" flex="4"/> specifically ...

htmlurlxulxulrunnermalformed

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Is there a way to display both numerical step values and corresponding custom text in Angular Material? I prefer having the number at the top and the descriptive text at the bottom. Check out this image for reference: https://i.stack.imgur.com/LGMIO.png ...

javascripthtmlcssangularangular-material