Скачать: CL | DM;

CSS. Увеличение картинки при наведении мыши на превью   Найти похожие ветки 

← →
Кто б сомневался ©   (2015-10-15 22:39) [0]

Может кому то понадобиться, а то целый день потратил на эксперименты с этим увеличением в DW.
Это легкий микс из примеров в сети по этой теме, но :

1. Картинки можно ставить горизонтально друг за другом, и они корректно увеличиваются, не съезжают, не мигают.
2. Не нужна картинка превью - только оригинальная (а то часто бывает превью весит больше чем ориг. пнг ).

<style>
.blok1 {
position: relative;
cursor: pointer;
display: inline-block;
}
.blok1 img + img {
position: absolute;
left: -20%;
top: -30%;
z-index: 100;
display: none;
}
.blok1:hover img + img {
display: block;
width: auto
</style>

// здесь 2 картинки расположены в ряд горизонтально, width задает размер превью (width с процентами не работает):

<p class="blok1"><img src="screenshots\1.png" width="232"/> <img src="screenshots\1.png"/></p>

<p class="blok1"><img src="screenshots\2.png" width="232"/><img src="screenshots\2.png"/></p>
       

---

← →
Кто б сомневался ©   (2015-10-15 22:43) [1]

* там где </style> нужно закрыть скобку }
* при наведении мышью

---

← →
Palladin ©   (2015-10-16 14:45) [2]

не ".blok1" , а ".aleksand_aleksandrovich_blok1"

---

← →
Кто б сомневался ©   (2015-10-16 22:36) [3]

> Palladin ©   (16.10.15 14:45) [2]


А есть еще Александр Блог.  В гугле прям первая ссыль на вк.
Чем то мне Пелевина напоминает.
Но только конкретно вам не понравиться его творчество, даже если вы любите Пелевина. Я знаю.

---

Страницы: 1 вся ветка

Скачать: CL | DM;



Память: 0.45 MB
Время: 0.007 c