bodyの左にはみ出させたい

現在jqueryでポップアップ（画像）をどんどん大きくなるようなアニメーションを作っています。
画像は画面からはみ出るくらい大きくさせたいです。
しかし、左だけどうしても画面からはみ出ません。
ソースコードはこんな感じです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <title>ポップアップ</title>
5  <meta charset="utf-8">
6  <style>
7    body, * {
8      overflow: hidden;
9    }
10    img {
11      margin: auto;
12      position: absolute;
13      top: 0;
14      left: 0;
15      right: 0;
16      bottom: 0;
17    }
18  </style>
19  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
20</head>
21<body>
22  <img src="oudon.png" id="oudon-img">
23  <script>
24    (function(){
25      $("#oudon-img").animate({
26        width: "10000px",
27        height: "10000px"
28      }, {
29        duration: 10000,
30        easing: "swing"
31      });
32    })();
33  </script>
34</body>
35</html>

分かる方、ご回答お願いします。org

行動規範の内容に同意します

回答1件

ベストアンサー

img 要素を絶対配置したうえで、 transform プロパティの translate 関数によって中央に配置することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <title>ポップアップ</title>
6  <meta charset="utf-8">
7  <style>
8    * {
9      overflow: hidden;
10    }
11
12    img {
13      top: 50%;
14      left: 50%;
15      transform: translate(-50%, -50%);
16      margin: auto;
17      background-color: #990000;
18      position: absolute;
19    }
20  </style>
21  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
22</head>
23
24<body>
25  <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=oudon.png" id="oudon-img">
26  <script>
27    (function() {
28      $("#oudon-img").animate({
29        width: "10000px",
30        height: "10000px"
31      }, {
32        duration: 10000,
33        easing: "swing"
34      });
35    })();
36  </script>
37</body>
38
39</html>