css hover creating border but pushing content

css border jump
border on hover
css add border without moving content
add border on mouseover
css border inside
hover border changes size
box-shadow
show border only on hover
Situation

I'm currently building a site and desire to have some elements create a border/outline upon hovering the mouse over them. This is simple enough to make work. For reference, please see the staging site at Stagin area link. I'm using the grid part of the latest bootstrap and the box-sizing model.

Issue

I find that upon hovering, the content below that which is being hovered gets "pushed" far down below the next element. Using the stagin area as reference, I can change the behaviour through CSS to fix this on the left hand side or the right hand side but, not both at the same time.

Code

Here is a snippet of the CSS I use to make the effect:

.hover-border:hover {
   border: 3px solid #3A3A3A;
   display: block;
}

Using this method, anything but the first element behaves as expected. If I try this next snippet, the first element works but, then the others break:

.hover-border:hover {
    border: 3px solid #3A3A3A;
    display: block;
    margin-top: -6px;
}

For the sake of clarification with regard to properties inherited, I have set the margin/padding on the elements in question to '0 !important' for standard behaviour until hover

Problem

How can I stop the element below from being pushed?

Personally - I go with something along the lines of:

.hover-border {
  border: 3px solid transparent;
  display: block;
}

.hover-border:hover {
  border: 3px solid #3A3A3A;
}

Add a CSS border on hover without moving the element, You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around: .jobs .item { background: #eee;� Today you will learn to create some kinds of border hover animation using HTML and CSS. In other words, we will create some hover animation that affects the borders of elements. If you are a beginner no problem, you will understand very easily the codes. There are only 2 main commands controls all the effects.

The best solution to these issues is to use the box-sizing:border box property

* {box-sizing:border-box;}

Then elements will retain whatever size you define but it will now INCLUDE borders and padding.

Apply Border on Mouse Hover without Affecting the Layout in CSS, However using the negative CSS margin value and a little trick you can do it nicely without affecting the other elements or content. Let's try out an example to� Try and test HTML code online in a simple and easy way using our free HTML editor and see the results in real-time.

Try This will work.

.hover-border {
border: 3px solid transparent;
display: block;

}
.hover-border:hover{
border: 3px solid #3a3a3a;
}

Or

a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}

I want to increase size of css3 border but not "move" the content at , The increase in border size pushes the block-item down 5px then back up. use default top margine =5 and change it to Zero on hover… Use :before for creating the border, that way you can handle it as an independent� Topic: HTML / CSS Prev|Next. Answer: Use the negative CSS margin. If you apply the border around an element on mouse hover it will move the surrounding elements from its original position, this is the default behavior. However using the negative CSS margin value and a little trick you can do it nicely without affecting the other elements or content.

Another solution with less code:

.hover-border:hover{
  box-shadow: inset 0 0 0 3px #3a3a3a;
}

box-sizing, Width and height values apply to the element's content only. 10px of border and 20px of padding are both pushed inside the element's box. If the content ends up making the element taller, it can still do that, which isn’t great, but it’s slightly better than doing nothing. Here’s an example of what this would look like (rerun to see delayed ad loading): See the Pen Avoiding Content Jumps by CSS-Tricks (@css-tricks) on CodePen. Another Example: A Third-Party Widget

Borders are tough to work with when sizing is important. I found it much better to use box-shadow, which just alters the background, so takes up no size.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a

add a css border on hover without moving the element, Format on Save. If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting. Definition and Usage. The :hover selector is used to select elements when you mouse over them.. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

CSS outline-offset property, Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to� CSS Border Style. The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border; dashed - Defines a dashed border; solid - Defines a solid border; double - Defines a double border; groove - Defines a 3D grooved border. The effect depends on the border-color value

The CSS layout model: borders, boxes, margins and padding , Boxes, borders, and margins are fairly simple objects, and CSS syntax provides the layout and presentation of content—perhaps even by canceling out large All inline elements except images lack margins, and will not take margin values. Creating rules: the rationale for five border shorthand properties instead of one. If you are learning HTML and CSS now, then try to create programs using HTML CSS only. Because of these types of program improve your web design skill and make your HTML-CSS strong. This is a pure HTML and CSS navigation bar, it has an animated underline effect on mouse hover. When I said this is a basic navbar many peoples think this program

Footer won't push down with contents - HTML & CSS, Is there a way I keep the footer pushing down as I scroll down the contents? how can I I got rid of the titles because they really weren't adding anything useful to the anchors Can't say I've heard of flexi, but universally CSS frameworks – and web html, body – After the margin/padding/border resets comes setting a fixed � Hover Effect CSS Libraries. HTML and CSS hover effect libraries (5 items). Demo Image: Hover.css Hover.css. A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. Made by Ian Lunn

Comments
  • Can you provide a jsFiddle?
  • I was just about to post this too. This is what you want to aim for, create a border by default but set it equal to either transparent or the color of the background it is on. That way, the space is already accounted for and hovering simply changes the border to visible
  • That works like a charm, thank you kindly. Trying to learn something new about the quirky way CSS works. Would I be right in assuming that when it comes to initial page rendering, defining those 3 pixels mean any of the child elements inherit properly and that's why it can render properly upon hover?
  • Imagine the content of your element is 100px X 100px to start with. The border wraps around the content - giving you an element that is 106px X 106px. If the border is only there on :hover, you are left with an element that is resized every time you mouse over it. The quick fix is to define the border to start with, but make it transparent :)
  • This doesn't always work and I really don't know why. Css is weird.