При нажатии только html / css3 увеличьте размер уменьшенного изображения

0

Я хочу сделать изображение более крупным при щелчке/двойном щелчке эскиза, а затем, когда я нахожу этот реальный образ, он должен увеличиться... до сих пор я могу навести миниатюру и показать реальное изображение, но я хочу использовать щелчок (для отображения) а затем навести реальный образ... я не хочу использовать js, нет ли какого-либо свойства в css3, которое могло бы помочь?

вот мой код для этого

    <section>
<li><a class="thumbnail" href="#">
                                            <img src="graphics/blue1.jpg" alt= "" width="100" height="150" />
                                            <span><img src="graphics/blue1.jpg"/><br /></span></a>
                                            </li>

                                            <li><a class="thumbnail" href="#">
                                            <img src="graphics/blue2.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue2.jpg" /></span></a>
                                            </li>
                                            <li>
                                            <a class="thumbnail" href="#"><img src="graphics/blue3.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue3.jpg"/><br /></span></a>
                                            </li>


                        </section>

здесь css для этих эскизов

 section li {
                list-style:none;
                    }

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#eee;
padding:5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ 
visibility: visible;
top: 10px;
left: 120px; 
}

также при наведении курсора мыши изображение наведения снижается, а не появляется впереди.

Теги:

3 ответа

0
Лучший ответ

Чтобы запускать события click в css, вы должны сделать следующее: инкапсулировать изображение в <a>

<a href="#ImgToDisplay"><img id="imageToBeClickedOn"/></a>

<img id="ImgToDisplay"></img>

Установите ImgToDisplay на скрыть по умолчанию и добавьте следующее в ваш css:

ImgToDisplay:target
{
//set your image to visible here.
}

Кроме того, чтобы увеличить ImgToDisplay при зависании, просто:

ImgToDisplay:hover
{
//enlarge your image here
}
Поделиться
  • 0
    Спасибо за помощь, но он не работает с моим кодом ... из кода, который я опубликовал, не могли бы вы откорректировать положение изображения с копией? его нет перед миниатюрой, вместо этого он опускается перед другим миниатюрой .. спасибо снова
  • 0
    Вы сделали свой «.thumbnail span absolute», поэтому вам придется очень аккуратно его расположить. Проблема заключается в вашем: '.thumbnail: hover span {visibility: visible; верх: 10 пикселей; слева: 120 пикселей; } 'Отрегулируйте' left 'в приведенном выше CSS, чтобы расположить новое изображение так, как вы хотите.
Показать ещё 2 комментария
0

Это не реально с CSS. Вы можете использовать: active pseudo element для возможного выполнения некоторых из них, но если вы попробуете это, вы быстро поймете, почему это не работает.

Для этого вам нужно использовать JavaScript или jQuery.

Поделиться
  • 1
    Без обид, но это возможно. Смотрите: tangledindesign.com/…
-2

Попробуйте этот пример,

HTML

<img src="graphics/blue1.jpg" id="imgs" onclick="zoom()" alt= "" width="100" height="150" />

JS

function zoom(){
    var NAME = document.getElementById("imgs");

    if (menu == 1) {

        menu = 0;
        $("#imgs").animate(
            {'width': '150px','height':'250px'},150
        );

    } else {
        $("#imgs").animate(
            {'width': '100px','height':'150px'},150
        );
    }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню