Css div hover size

How to Make Elements Zoom/Scale up on Hover With CSS

Learn how to make elements zoom/scale-up on hover with pure CSS by using the transform property’s transformation method: scale() .

Try moving your mouse over this box:

It scales up exactly 1.5 times the original size — so it becomes 50% bigger when you move your mouse over (hover) it.

The CSS transform property’s scale method can either increase or decrease the size of elements. It works in both 3D and 2D. In this simple example, we use 2D.

To recreate the example above, we need 1 HTML element and 2 CSS rule-sets.

First create your HTML element with a class called zoom-box :

Then add this CSS to your stylesheet:

.zoom-box  background-color:#CF4B32; width: 100px; height: 100px; margin: 32px auto; transition: transform .2s; /* Animation */ > .zoom-box:hover  transform: scale(1.5); >

• First, we create an HTML div element with a class attribute called zoom-box .
• Then we create two rule-sets for the zoom box class, one for the static default state, .zoom-box and one for the dynamic hover state, .zoom-box:hover .
• The first rule-set gets some cosmetic/size properties ( height, width, color ). The margin property is just to center align the box (optional).
• The important part of the .zoom-box class is the transition property with the value of transform and duration of .2s (200 milliseconds).
• In the second rule-set .zoom-box:hover we add the transform property, with the scale() method as a value. It takes a parameter 1.5 which is what dictates how much the box element should scale up on hover. 1.5 is like saying 150% of the original size.

Here’s the code from this tutorial with added browser vender prefixes, so it works in all the mainstream browsers, Chrome, Firefox, Safari, Opera:

.zoom-box  background-color: #cf4b32; width: 100px; height: 100px; margin: 32px auto; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */ > .zoom-box:hover  -webkit-transform: scale(1.5); transform: scale(1.5); >

Notice that the box element scales up and down with the same transition duration/timing, even though we only added the transition property to the .zoom-box class.

This happens because when the transition property is added to the original class selector ( .zoom-box ), its values are automatically added to every additional selector attached to the class, in this case, it’s :hover (also called a pseudo-class)

If you only add the transition property to the :hover (pseudo) selector class, then it only animates the scale-up part — not scale down. As soon as you move outside of the box element, it abruptly scales down with zero (0s) duration — which you rarely want, since it’s harsh on the eyes.

If you want to use different animation types and duration on the different states of your element (up/down), you simply add a transition property to the :hover pseudo-class selector, and give it different values.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

How TO — Zoom on Hover

Learn how to zoom/scale an element on hover with CSS.

Zoom on Hover

How To Zoom on Hover

Example

.zoom:hover transform: scale(1.5); /* (150% zoom — Note: if the zoom is too large, it will go outside of the viewport) */
>

Tip: Go to our CSS Transform Tutorial to learn more about how to scale elements.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Css increase size of a div on hover

Here’s a fiddle: https://jsfiddle.net/5bew5wu5/6/ Solution 2: If you want to stick with this method (there may be other methods that are simpler and more efficient), use absolute positioning, which removes elements from the normal flow, instead of relative positioning, which doesn’t and, therefore, impacts surrounding elements. Here’s a basic example: Solution 1: You can try add container on image and set and for img Solution 2: You don’t need to alter your HTML — just scale the img on hover rather than alter its width and height.

Best way to change div width on hover

Yes, with CSS you can do something similar with «Transition» but not as animated as in the example because you are limitated with CSS what to change on hover. As I know you can’t change elements before the element you hover over ( correct me if I’m wrong )

Here is a simple example ( https://jsfiddle.net/9510a6kj/ ) :

.left, .right < float:left; >.left < background: red; width: 200px; height: 300px; transition: width 1s ; >.right < background: blue; width: 300px; height: 300px; transition: width 1s; >.left:hover < width: 300px; >.left:hover + .right

Transiton will «animate» ( more delay ) the change from width A to B

Well its always great to learn more skills but you can add a hover effect without even using JS, by using the CSS hover effect.

Generally looks something like:

Kind of the lazy or hacky way of doing it but it works fine, and its a lot easier at a very early stage of learning development. You could also use a jquery pluggin like this one (just change the text out for an image and edit the properties)

How hovering over a division element to gradually change the width, You can use transition property in CSS to make some transition effect as changing the width of an element. The transition effect can be

Resize Divs On Hover

Change width and height of element on hover

Instead of changing the element’s width and height, try transforming it. That should prevent it from moving elements around it.

If you want to stick with this method (there may be other methods that are simpler and more efficient), use absolute positioning, which removes elements from the normal flow, instead of relative positioning, which doesn’t and, therefore, impacts surrounding elements.

.cont < position: relative; >.some < width: 250px; height: 250px; position: absolute; >.some:hover < z-index: 10; width: 500px; height: 500px; >img:nth-child(1) < top: 0; left: 0; >img:nth-child(2) < top: 0; left: 255px; >img:nth-child(3) < top: 0; left: 510px; >img:nth-child(4) < top: 255px; left: 0px; >img:nth-child(5) < top: 255px; left: 255px; >img:nth-child(6)

Div Expand its size on hover due to border [duplicate], Why not just start your button with a border, instead of adding it on hover? As it’s the same colour as the background,

Change the image size on hover without changing the parent div’s size

You can try add container on image and set position:relative and for img position:absolute

.img-container < width: 200px; height: 200px; position: relative; >img < width: 100%; height: 100%; position: absolute; >img:hover

You don’t need to alter your HTML — just scale the img on hover rather than alter its width and height. Scaling will not affect the positioning of other elements as the scaled element keeps its original size as far as they are concerned.

you can do this by using the transform property

.product-items < width: 200px; height: 200px; >.img-div < height: 100px; width: 100%; overflow: hidden; >img < width: 100%; height: 100%; transition: 0.4s; >div:hover img

How to expand a div and its contents on hover?, If you do «height:auto», they expands right heights, but no animation supported. There is a way you do both with some little javascript, to use

Hover over DIV to expand width

I think that you don’t need javascript for this.

html,body < margin: 0 auto; height: 100%; width: 100%; >body < background-color: black; >#growContainer < display: table; width:100%; height:100%; >.grow < display: table-cell; height:100%; width: 25%; -webkit-transition:width 500ms; -moz-transition:width 500ms; transition:width 500ms; >#growContainer:hover .grow < width:20%; >#growContainer:hover .grow:hover

You can solve it easily using toggleClass()

If you’re okay with using flexbox , this could be the solution you’re looking for.

html, body < height: 100%; margin: 0; >.grow < display: flex; justify-content: center; height: 100%; overflow-x: hidden; >.grow > div < flex-basis: 25%; flex-shrink: 0; transition: .5s; >.grow > div:hover < flex-basis: 40%; >.grow > div:first-child:hover < margin-left: 15%; >.grow > div:last-child:hover

This piece of code actually hides the left and right boxes when one of the two in the middle is being hovered, like in the website you showed. It’s also CSS only, so that’s a plus!

So the container is a flexbox , its children are always centered, their flex-basis is 25%, and they can’t shrink ( flex-shrink: 0 ), which means that when one of them grows, they will overflow.

Then when the first one or the last one is being hovered, they get 15% extra margin added, which let’s them flow back into the container.

Hover over DIV to expand width, Every time I hover over a div it will remove one off the page because it’s gone over 100%. In your CSS :hover , you say, «This is the height»,

Источник

Css change size of div on hover

According to what I understood about the problem, here is a solution to see if it is correct. https://codepen.io/anon/pen/ROEogj Solution 1: Why not just start your button with a border, instead of adding it on hover? As it’s the same colour as the background, it makes no difference to the non-hover state Solution 2: Add a transparent border to the link: Solution 3: There are multiple ways to achieve this.

Div Resizing on Hover CSS

According to what I understood about the problem, here is a solution to see if it is correct.

Description: