Что изменить в шаблоне multiverse html5 для корректной работы псевдостиля hover(часть2)?

Question

[shamilpan]

Добрый день, хотелось бы иметь на указанном шаблоне (ссылка на живой сайт)стиль на изображениях по типу примера вариант примера Zoom In #2:

html

<div class="hover02 column">
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
			<span>Hover</span>
		</div>
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure>
			<span>Hover</span>
		</div>
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
			<span>Hover</span>
		</div>
	</div>

css

.hover02 figure img {
	width: 300px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover02 figure:hover img {
	width: 350px;
}

Прошу помощи, самостоятельно не получилось это корректно реализовать.

Answer 1

[shamilpan]

пока сделал так

#main .thumb:hover > .image{
		opacity: 1;
		transform: scale(1.15,1.15);
		-webkit-transform:scale(1.15,1.15);
		-moz-transform:scale(1.15,1.15);
		-ms-transform:scale(1.15,1.15);
		-o-transform:scale(1.15,1.15);

но плавности увеличения нет, думаю как ее сделать...

Comments

[shamilpan]

добавил

transition: all 4s;

и плавность появилась

Answer 2

[Павел]

С текущей Вашей версткой никак, у Вас же картинки идут не тегом img, а фоном (background), а img скрыты. Скрипт писать или верстку менять

Answer 3

[Ankhena]

Менять background-size с помощью keyframes
shra.ru/2015/10/zoom-ehffekt-na-css3

Comments

[shamilpan]

к сожалению, не получилось корректно воплотить ваш вариант в жизнь

[Ankhena]

shamilpan: Вы бы код выложили на jsfiddle или аналог