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

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

javascripthtml

Superimpose two actionlinks and prioritize the one appearing above

I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...

jqueryhtmlcssasp.net-mvc-4

Changing the height of one Div based on another Div's height

I currently have a display of four divs positioned side by side. I am seeking a solution to ensure that the height of each div remains consistent, and should adjust accordingly if one of them increases in size due to added text content. For reference, ple ...

javascriptjqueryhtmlcss

Select from multiple levels in a dropdown menu HTML

I have encountered an issue while developing a website. I am trying to create a hierarchical list with multiple levels, but it seems that such feature does not exist (unless you know otherwise). As a workaround, I have implemented a system using invisible ...

htmldrop-down-menu

Tips for keeping a link in place on an image

Trying to place a link on a 1920x1080 picture and keep it fixed in one spot, regardless of browser size. Any suggestions? <!DOCTYPE html> <link rel="stylesheet" href="../style.css" /> <html> <head> ...

htmlcss

The textbox is unable to receive input from the pop-up window

Whenever I click on a text-box, a popup window opens up. However, the value is not inserted in the text-box when I select any radio option in the popup. Can you identify where the problem lies? Here's the text-box: <tr><td> Work </td& ...

phphtml

Text Alignment Issue in Icon Bar of Zurb Foundation 5

There's an unusual problem I'm encountering with the alignment of text under the icon bar not being properly centered below the icons. Here is a snippet of the code: <div class="row"> <div class="small-12 columns"> < ...

htmlcsszurb-foundationzurb-foundation-5

The z-index property seems to be malfunctioning when used in conjunction with the relative and absolute positioning

I have created a dropdown menu using pure CSS3, but I am facing an issue with the z-index property. The dropdown list is appearing above the menu when it should be dropping below it. I have spent all day trying to troubleshoot this problem to no avail, so ...

htmlcssz-index

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

javascriptjquerycss

Extension for web design snippet

My program creates dynamic html documents using specific parameters, but there is one section that remains static and is pulled from a local text file. What would be the most appropriate file extension to use for this particular snippet? htm(l): Although ...

htmltext-filesfile-extensiondynamically-generated

Layer one image on top of another using z-index

I'm having trouble layering one image on top of another in my code. Here is my code: body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; } .neer { z-index: 100; position: absolute; } ...

javascripthtmlcssimageoverlay

Is there a way to show uppercase values in Angular's tooltip as capital letters?

Here is my HTML code: <i [class]="item.icon" [pTooltip]="item.item" tooltipPosition="bottom" ></i> The value inside item.item is 'ATTACHMENT' and I am unable to modify it from the ts file. Is there a way ...

htmlangulartooltipprimeng

Learn the process of covering the entire screen with a video

I'm attempting to achieve this: IMG Below is the code snippet I've been using: <div class="container" id="containervideo"> <div id="video"> <div class="box iframe-box"> <div class="container"> ...

javascripthtmlcss

Sending data through forms

I'm having trouble storing values input through a dropdown menu in variables event1 and event2, despite trying global declarations. How can I successfully store a value to both variables and pass it to the JavaScript code? Thank you. <!DOCTYPE HT ...

javascripthtmlcssforms

Picture transports during change

Is there a way to increase the size of images in a List without causing other images to move when hovered? Currently, when an image is hovered, it increases in size but causes the surrounding images to shift to a new line and I would like to avoid this beh ...

htmlcss

Switch out the content when the button is clicked

Seeking a code snippet to enable clicking a button (Button labeled "Next") for replacing existing code on the page with new code. Current code below should be replaced, starting from the score counter section. Please excuse any messy code as I'm new a ...

javascripthtml

Scrolling a div automatically without affecting its parent element

On a page, I have a scrollable list of items that can be updated with a PUT request. Once the update is successful, another network request is made to fetch the updated list. The goal is to automatically highlight the recently updated item in the list. Al ...

javascripthtmlcssreactjs

Linkyfy.js does not function correctly with each and not statements

Trying to incorporate a linkifying script on a website, which transforms URLs in text into clickable links. Utilizing the following solution: https://github.com/SoapBox/linkifyjs To make it operational (post-download), the following steps are required: & ...

javascriptjqueryhtml

What is the method to rotate an SVG icon contained within a button when clicked?

I'm attempting to incorporate a CSS animation into an SVG that is enclosed within a button. Example <button class="spin"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ari ...

javascripthtmlcsscss-animations