Home>

I'm thinking of implementing an animation that enlarges an image in the form of an image.

I couldn't implement it as expected, but I would like to know how to achieve this.

Error message

There are two problems.
1. Because the reference point is in the upper left, it will be enlarged using it as a reference
2. When I want to enlarge beyond the parent element as it is, the reference point gets caught in the parent element and the image shifts from the center

Tried I tried to use

position: fixed,vertical-align: middle, etc., but I couldn't get it to work.

Current status
<body>
  <div>
    <img src = "hoge.png">
  </div>
</body>
.box {
  text-align: center;
}
.img-class {
  width: 800px;
  height: auto;
  vertical-align: middle;
}
$(". img-class"). animate ({
  width: "3000px"
}, {duration: 900, queue: false});

Currently this is the implementation.

  • Answer # 1

    How about usingtransform: scale ();?
    The reference position oftransformis determined by thetransform-originproperty.

    The initial value of the

    transform-originproperty is50% 50% 0,
    In other words, it will be the center of the image, so there is no problem not to describe it.

    <div>
      <img src = "https://StackOverflow.storage.googleapis.com/uploads/contributed_images/7facf203fda8f6103785353458a06a56.png" alt = "hoge">
    </div>
    . Parent element {
      width: 400px;
      height: 250px;
      // Use this if you don't want the image to protrude from the parent element
      // overflow: hidden;
      .Image {
        width: 100%;
        height: 100%;
        transition: transform .3s;
        &: hover {
          transform: scale (1.2);
        }
      }
    }

  • Answer # 2

    Because it should be light, rigani_c's answer is recommended, but for the time being.

    . box {
      position: relative;
    }
    .img-class {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate (-50%, -50%);
    }

Related articles