わかりました..だから私は少し初心者ですが、そうではありません。'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>