Я хочу сделать изображение более крупным при щелчке/двойном щелчке эскиза, а затем, когда я нахожу этот реальный образ, он должен увеличиться... до сих пор я могу навести миниатюру и показать реальное изображение, но я хочу использовать щелчок (для отображения) а затем навести реальный образ... я не хочу использовать 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;
}
также при наведении курсора мыши изображение наведения снижается, а не появляется впереди.
Чтобы запускать события 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
}
Это не реально с CSS. Вы можете использовать: active pseudo element для возможного выполнения некоторых из них, но если вы попробуете это, вы быстро поймете, почему это не работает.
Для этого вам нужно использовать JavaScript или jQuery.
Попробуйте этот пример,
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
);
}
}