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"

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

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

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