Настройки галереи изображений CSS - PullRequest
Новая
       10

Настройки галереи изображений CSS

1 голос
/ 20 июня 2011

Мне нужна простая галерея изображений, поэтому я решил построить ее полностью на CSS и попытался найти что-то подходящее в сети. Я нашел нечто очень близкое к тому, что я хочу, вот примененные стили CSS: 

<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 500px;
    color: #000000;
    font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a
{
    color: #000000;
}

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    margin: 10px;
    padding: 0;
    float: left;
    position: relative;
    width: 120px;
    height: 100px;
}
.gallery img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
    width: 110;
    height: 90;
}
.gallery span {
    width: 77px;
    height: 27px;
    display: block;
    position: absolute;
    top: -12px;
    left: 50px;
    background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto}
</style>
</head>

<body>
<ul class="gallery">
    <li><a href="#"><span></span><img src="image/8.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/9.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/4.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/7.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/5.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/6.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/3.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/1.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/2.jpg" alt="image" /></a></li>
</ul>
</body>
</html>

На самом деле я даже не знаю, зачем мне нужно .gallery span{} (может быть, несколько советов здесь) Но главная проблема заключается в следующем: Pic1:

enter image description here

Вот так выглядит моя галерея, и я хочу, чтобы она выглядела именно так, но когда я: наведите и увеличьте изображение, вот что происходит

pic2:

enter image description here

и прояснить еще одну картинку

pic3:

enter image description here

Что мне нужно, и чего я хочу добиться, так это чтобы все увеличенные изображения выглядели так:

pic4:

enter image description here

но, очевидно, перед миниатюрами. Любая помощь, пожалуйста.

Спасибо

Лерон

Ответы [ 2 ]

0 голосов
/ 20 июня 2011

Добавьте position: relative; к своему телу, удалите position: relative; из .gallery li и добавьте position: absolute; top: 0; left: 0; в .gallery a: hover img.

Ваш окончательный CSS-код: 

    <style type="text/css">
    body {
        margin: 0 auto;
        padding: 0;
        width: 500px;
        color: #000000;
        font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
        position: relative;
    }
    a
    {
        color: #000000;
    }

    .gallery {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .gallery li {
        margin: 10px;
        padding: 0;
        float: left;
        width: 120px;
        height: 100px;
    }
    .gallery img {
        background: #fff;
        border: solid 1px #ccc;
        padding: 4px;
        width: 110;
        height: 90;
    }
    .gallery span {
        width: 77px;
        height: 27px;
        display: block;
        position: absolute;
        top: -12px;
        left: 50px;
        background: url(images/tape.png) no-repeat;
    }
    .gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto; position: absolute; top: 0; left: 0;}
    </style>
0 голосов
/ 20 июня 2011

Вам необходимо использовать свойство z-index: 

.gallery a:hover img {
    ....
    z-index: 10;
}
...