Как центрировать блок с вложенными изображениями?

Question

[Max Freeman]

С HTML и CSS никогда не сталкивался. Есть 16 картинок. Нужно расположить 8 картинок в два ряда, а следующие 8 под ними. При наведении на картинку 1 открывается картинка 1.1 (красивая замена/анимация), и так ко всем изображениям. Картинки выполняют роль ссылок на статьи. Не могу сообразить, как все это реализовать. Нужно как-то организовать все это в блоки, а потом выровнять по центру страницы. Макет.

Answer 1

[Eugene Mosyukov]

Не могу сообразить, как все это реализовать.

Обратиться на фриланс биржу.

Comments

[Max Freeman]

Я хочу сделать это сам, но знаний практически нет.

[Crash]

@dellnik тогда htmlbook.ru

Answer 2

[Сергей Мельников]

Я так понимаю, ты хочешь что бы за тебя сделали верстку? если ты с html и css не сталкивался, заплати тому, кто сталкивался и пусть он сделает за тебя, иначе учи азы, кури мануалы)

Comments

[Max Freeman]

Это не коммерческое дело. Из любопытства захотелось сделать. Курю маны, но хотелось бы получить подсказку и двигаться дальше.

[Ярослав Алексеенко]

Поздно, ты уже подсказал ему все что нуна :), @mlnkv.

Answer 3

[outcastik]

8 блоков с высотой и шириной, float:left. Картинки спрайтом

Comments

[Max Freeman]

А вставить эти 8 блоков в один и выровнять по центру страницы?

[outcastik]

для контейнера margin: 0 auto;

[Mike Pol]

можно использовать не float:left; а display:inline-block;

Answer 4

[Сергей Мельников]

.container {
    		text-align: center;
    	}

    	.container .img {
    		display: inline-block;
    		width: 12%;
    	}

        .container .img img {
		max-width: 100%
	}

<div class="container">
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>

	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>
	<div class="img">
		<img src="http://lorempixel.com/400/200/" alt="">
	</div>

</div>

Comments

[Max Freeman]

В результате появляется 2 строки по 8 картинок в каждой. При обновлении изображения меняются. Все не то.

[Сергей Мельников]

а как должно быть?!

[Max Freeman]

Должно быть 2 строки по 4 изображения под которыми еще 4, которые меняются при наведении курсора. На макете видно.

Answer 5

[Anton Essential]

Псевдо класс ховер добавте тегу а , и транзишн для плавной анимации , бекграунд задайте изоброжением , по событию ховер задайте другой бекграунд .