How to transform:scale the top and bottom part of a div using CSS


Tags: html,css,css3,css-transforms

Problem :

How can I scale just the top and bottom part of a <div> using CSS? Because using transform: scale(1.01); makes the whole div scale out and I just want the top and bottom part of the image to be expanded.

Here is what I want to achieve:

enter image description here



Solution :

You can use scaleY() to scale just the top and bottom of an element. The generic scale() scales both the element in both X and Y axes.

div {
  float: left;
  height: 100px;
  width: 100px;
  border: 1px solid;
  margin: 10px;
}
.scaled{
  transform: scaleY(1.1);
}

.normal:hover{
  transform: scaleY(1.1);
}
<div class='scaled'>Scaled div</div>
<div class='normal'>Normal div</div>
<div class='normal'>Normal div</div>
<div class='normal'>Normal div</div>


    CSS Howto..

    How to make a JS horizontal content slide from px to % responsive

    How to make this breed of resizable vertical divider for two divs?

    How do I style the scrollbar of a textarea

    How to apply CSS style in javascript for id generated at runtime

    How to prevent Float contents overlap other contents below

    How to make IE respect max AND min-width [duplicate]

    How to write Hover property with CSS for a piece wih :after and :before properties?

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    Modify CSS class “two” if class “one” is not shown on screen

    How to make a div fill the entire page height using css? [closed]

    How do I make cards of different heights fill gap in css? [duplicate]

    How to apply css to div content based on regex

    How to create a horse-shoe-like gauge using CSS

    How to control new line position after CSS display inline-block break

    How to get css3 ribbon on both sides of element

    How to put some divs in a row?

    CSS: How to set the width and height dependent on the screen/window size?

    How to create a horizontal calendar with nested lists?

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    How to wrap long lines without spaces in HTML?

    How can I expand this tag?

    How to format a button with in Form tag, html?

    How to position iframe (calendar) inside php echo statement?

    fa-star () is always yellow, how to make it white?

    How to get css height property of an object and add 20px to it?

    How can I achieve this transparency effect using css?

    How to keep CSS style If I change the html content dynamically?

    How to use a variable for image paths with less mixins

    How to read CSS property of Psuedo class in javascript

    How to create a web page with 4 rectangurlar splits?