У меня есть три изображения (прозрачные png)
которые складываются с использованием следующего html/css
<div style="position: relative; left: 0; top: 0;">
<img src="img/main.png" style="position: absolute; top: 0; left: 0;" />
<img src="img/middle.png" style="position: absolute; top: 0; left: 0;"/>
<img src="img/center.png" style="position: absolute; top: 0; left: 0;"/>
</div>
чтобы получить следующее:
Я хочу добавить эффект зависания на каждом из этих изображений (увеличение, граница, непрозрачность и т.д.).
Обычный CSS для увеличения при наведении будет:
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
который не работает в этом случае, потому что эффект зависания применяется ко всему изображению не только к части изображения (изображения имеют прозрачный фон).
Мой вопрос: возможно ли создавать прозрачные изображения с CSS, которые имеют неправильную форму?
jsfiddle здесь: http://jsfiddle.net/h4mxysw5/
Изменить:
Кажется, есть путаница. Я не хочу одновременно масштабировать все три изображения.
Например - когда наведите курсор на центральное изображение, я хочу, чтобы только центральное изображение увеличивало (не все).
Обновлен jsfiddle с рамкой: http://jsfiddle.net/h4mxysw5/4/
