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 display table-cell on a single line (IE6-IE7)?

    [SOLVED]How to generate dynamic external link?

    How to know where to use css, less and Sass? [closed]

    Validatation error “Value Error : background-position Too many values or values are not” How to solve?

    How to force span to use parent font-family in CSS

    How to Centre Glyphicon Vertically In Bootstrap Button

    How can I place two DIVs inside a horizontal fixed header and make all the content vertically align?

    How do you skew a div and keep the background image unskewed

    How can I vertically align the text in an anchor tag?

    how to select :after element using jquery

    how to break unordered list of links with image or color with css

    How can a transformed Image transition back to it's original shape when hovered?

    How to display loading.gif at the center of the screen which has a scrollbar

    How can I dynamically resize a DIV element's width to fit its text content?

    How to create a list with three columns in a row by css and html?

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    How do I apply CSS Transition to my responsive menu?

    How to neutralize CSS definitions without overriding

    How to avoid bloating pages with divs?

    how to load different css files with different screen sizes?

    how to check what css code is invalid using browser plugins [closed]

    Bootstrap modal: how to fade in, but immediately disappear on close

    How to integrate many CSS files

    How to align/move Vaadin buttons

    How to have the class=“selected” depending on what the current page/url is

    How to align the navigation menu in wordpress?

    How should I set this caption over my image using CSS?

    How to use css to display an avatar pic with details next to it?

    How to get the bottom border to stretch fully across a page in CSS

    jQuery slideDown() moves everything below downwards. How to prevent this?