jquery - 图片从点击位置缩放到中心

Question

点击时的图像需要缩放并放置在页面中心。

我正在努力得到这个。但图像从其位置缩放但未到达中心。

请帮忙...

点击时的图像需要从其位置缩放到页面中心。

提前致谢!

HTML:

<div id="images-box">
    <div class="holder">
        <div id="image-1" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://31.media.tumblr.com/avatar_1bf26535ffab_128.png" alt="earth!">
            <a class="expand" href="#image-1"></a>
        </div>
    </div>
    <div class="holder">
        <div id="image-2" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://lh4.googleusercontent.com/-R2RDCSU4LLc/UMwAufX2OHI/AAAAAAAAABI/9qS-XXO3g0M/s96-c/nayanthara-couldnt-control-her-weeping.jpg" alt="earth!">
            <a class="expand" href="#image-2"></a>
        </div>
    </div>
    <div class="holder">
        <div id="image-3" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://33.media.tumblr.com/avatar_9ed2a2fe524e_128.png" alt="earth!">
            <a class="expand" href="#image-3"></a>
        </div>
    </div>
  <div class="holder">
        <div id="image-4" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://31.media.tumblr.com/avatar_1bf26535ffab_128.png" alt="earth!">
            <a class="expand" href="#image-4"></a>
        </div>
    </div>
    <div class="holder">
        <div id="image-5" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://lh4.googleusercontent.com/-R2RDCSU4LLc/UMwAufX2OHI/AAAAAAAAABI/9qS-XXO3g0M/s96-c/nayanthara-couldnt-control-her-weeping.jpg" alt="earth!">
            <a class="expand" href="#image-5"></a>
        </div>
    </div>
    <div class="holder">
        <div id="image-6" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://33.media.tumblr.com/avatar_9ed2a2fe524e_128.png" alt="earth!">
            <a class="expand" href="#image-6"></a>
        </div>
    </div>
  <div class="holder">
        <div id="image-7" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://31.media.tumblr.com/avatar_1bf26535ffab_128.png" alt="earth!">
            <a class="expand" href="#image-7"></a>
        </div>
    </div>
    <div class="holder">
        <div id="image-8" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://lh4.googleusercontent.com/-R2RDCSU4LLc/UMwAufX2OHI/AAAAAAAAABI/9qS-XXO3g0M/s96-c/nayanthara-couldnt-control-her-weeping.jpg" alt="earth!">
            <a class="expand" href="#image-8"></a>
        </div>
    </div>
    <div class="holder">
        <div id="image-9" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="https://33.media.tumblr.com/avatar_9ed2a2fe524e_128.png" alt="earth!">
            <a class="expand" href="#image-9"></a>
        </div>
    </div>
</div>

CSS:

#images-box {
    width: 100%;
  height:100%;
}

.image-lightbox img {
    width: inherit;
    height: inherit;
    z-index: 3000;
}

.holder {
    width: 200px;
    height: 200px;
    float: left;
  position:relative;
}

.image-lightbox {
    width: inherit;
    height: inherit;
    background: #fff;
    position: relative;
    top: 0;
    -webkit-transition: all ease-in 0.25s;
    -moz-transition: all ease-in 0.25s;
    -ms-transition: all ease-in 0.25s;
    -o-transition: all ease-in 0.25s;
}

.image-lightbox span {
    display: none;
}

.image-lightbox .expand {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 4000;
}

.image-lightbox .close {
    position: absolute;
    width: 20px; height: 20px;
    right: 20px; top: 20px;
}

.image-lightbox .close a {
    height: auto; width: auto;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    background: #22272c;
    float: right;
}

div[id^=image]:target {
    width: 450px;
    height: 300px;
    z-index: 5000;
    top: 25%;
    left: 25%;
  position:absolute;
}
div[id^=image]:target .close {
    display: block;
}

div[id^=image]:target .expand {
    display: none;
}

代码:http://codepen.io/anon/pen/rOzawP

Answer 1

此处应用此更改 -

div[id^=image]:target {
    width: 450px;
    height: 300px;
    z-index: 5000;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    position:fixed;
}

您的弹出图像将水平和垂直居中!