0

わかりました..だから私は少し初心者ですが、そうではありません。'04-06' で多くの html コーディングを行いました.. 再びそれを取り上げることにしました。意味がわからない場合はお知らせください。写真用の「ライトボックス」効果の写真ギャラリーを希望するクライアントがいます。例: サムネイルをクリックすると、大きな画像がズームインし、背景がフェードアウトします。javascriptなどに頼るのではなく、css3でコーディングできるかどうかを確認することにしました。これがおそらく非現実的であることはわかっています..しかし、クライアントはそれほど多くの写真を持っておらず、かなりシンプルなサイトを望んでいます。

全体像を把握する場合を除いて、大部分は順調に進んでいます。この画像をページの中央に配置したいのですが、0px から 400px に移行すると何か問題が発生します。左と上はそのままで、右と下に伸びているように見えます。これを中心に成長させる方法。おそらく幅と高さの調整をスキップして、不透明度の遷移だけを使用できることはわかっています..しかし、それはそれほどクールに見えません.

これは初期段階に過ぎないので、他のブラウザでテストしていません..事実、他のブラウザで動作させるにはコードを追加する必要があることを知っています..しかし、それが役立つ場合は、現在クロムを使用しています.

<!DOCTYPE html>
<html>
<head>
    <title>LIGHTBOX</title>
    <style>
            html{
                height:100%;
            }

            img{
                max-height:100%;
                max-width:100%;
            }

            .centerimage{
                    display:block;
                    margin-left:auto;
                    margin-right:auto;   
            }

    #imagezoom {
        position: absolute;
                    margin:-200 0 0 -200;
                    top:50%;
                    left:50%;
        z-index:-1;
                    padding-right:0;
                    border: solid 5px white;
        overflow: hidden;
                    width: 0px;
                    height: 0px;
                    opacity: .0;
                    box-shadow: 0px 0px 500px 50px #888888;
        transition: opacity .7s, width 1.5s, height 1.5s; 
    }

            #imagezoom:target{
                    z-index:2003;
                    width: 400px;
                    height: 400px;
        opacity: 1.0;
            }

</style>
</head>
<body>


    <div id="imagezoom">
        <a href="file://localhost/Users/hollykrahulik/Desktop/
test%20website%20stuff/lightbox2.html">
        <img src="images/grumpycat.jpg">
        </a>
    </div>

<a href="#imagezoom">
        <img src="images/grumpycat_thumb.jpg" class="centerimage">
    </a>
</body>
</html>
4

1 に答える 1