ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выровнять картинку по вертикали на чистом CSS

Выровнять картинку по вертикали на чистом CSS

Выровнять картинку по вертикали на чистом CSS
Здесь поставит картинки вертикально и зададим им размер и создадим отступы. Также можно поставить ссылку на переход данную страницу. При наведении будет эффект затемнение, где основное слово в прозрачном виде. И там появится как название или ключевое слово, что смотрится великолепно. Такую конструкцию можно поставить под основной материал, что будет как прикрепление к главному изображению.

Так как есть мануалы, где на снимках все показано, но занимает много места, этот вариант как раз решит, плюс все красиво смотрится.Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не против использования выражений IE, вы можете использовать псевдокод и добавить его в IE с помощью удобного выражения, которое выполняется только один раз для каждого элемента, поэтому не будет проблем с производительностью.

Но все это теория, переходим к установке:

По месту размещаем HTML

Код
<div class="block-container">
  <img src="http://zornet.ru/_ld/83/15262124.png" />
  <div class="block-front"><span>ZORNET.RU</span></div>
</div>
<div class="block-container">
  <img src="http://zornet.ru/_ld/83/08830581.png" />
  <div class="block-front"><span>ZORNET.RU</span></div>
</div>
<div class="block-container">
  <img src="http://zornet.ru/_ld/83/77995051.jpg" />
  <div class="block-front"><span>ZORNET.RU</span></div>
</div>

CSS

Код
.block-container {
  position: relative;
  float: left;
  margin: 2px;
  }
   
  .block-container,
  .block-container div,
  .block-container img {
  width: 149px;
  height: 149px;
  }
   
  .block-container div,
  .block-container img {
  position: absolute;
  }
   
  .block-container img {
  z-index: 1000;
  }
   
  .block-front {
  z-index: 1001;
  background-color: black;
  transition: all 0.4s ease-in-out 0s;
  opacity: 0;
  color: white;
  cursor: pointer;
  }
   
  .block-front:hover {
  opacity: .5;
  }
   
  .block-front span {
  display: block;
  font-weight: bold;
  padding: 58px 0;
  text-align: center;
  }

Когда объект помещается на страницу, он может быть расположен как абсолютный, так и относительный. Большинство объектов относятся к относительным, что означает, что если предыдущие объекты растут и становятся больше.

Демонстрация:
30 Ноября 2017 Просмотров: 1983 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 2
-SAM-
-SAM- 01 Декабря 2017 00:341
+1
Вообще-то для вертикального выравнивания применяют свойство vertical-align, а центровка картинок делается как тут написано (что картинке присваивается блочное отображение и отступы задаются).
Kosten
Kosten 02 Декабря 2017 00:382
0
Здесь вероятнее, это материал предназначен для вид материалов и комментариев к нему. Хотя возможно его расположить на другую функцию, не исключаю на главной.
avatar