Кастомизация голоса. Увеличиваем превьюшки (фото постов в ленте) [ОБНОВЛЕНО!] Исполняем желания по стилю.

Вчера я написал про то, как поднять и закрепить кнопки редактора - настройка редактора

Сегодня идем дальше, в пару кликов делаем превью постов больше.

Фото постов иногда содержат мелкие детали, которые хотелось бы рассмотреть не заходя в пост. Фото в ленте не сложно увеличить. 

Суть в том, что бы применить пользовательский CSS стиль, это можно сделать множеством способов, самый удобный для рядовго юзера - поставить плагин stylish

Установка для: Chrome | firefox | opera

Устанавливаем плагин, создаем новый стиль, добавляем CSS

img.PostSummary__image {

    width: 100%;

    max-width: 400px;

    height: auto;

    margin-right: 10px;

    margin-bottom: 30px;

}

Важно применить к "URL в домене" - "golos.io"

В коде можете изменить значения. 

Например указать максимальную ширину в пикселях или процентах в значении:

max-width: 400px;

А в значениях 

 margin-right: 10px; margin-bottom: 30px;

Вы можете регулировать отступ текста от картинки и отступ снизу от картинки.

Такой же метод применим ко всем элементам дизайна голоса. Да и любого другого сайта. Вы можете менять практически все, фон, шрифты, цвета и размер элементов и т.д. Можно сделать хаки и поинтересней, например прописать в :after значение title и добавить в ленте отображение количества голосов за пост. И т.д.

Если у вас есть пожелания к оформлению голоса - опишите, что именно нужно. CSS очень простая штука :)

А вот и пожелания:

 Было бы круто если бы просто наведя мышку на картинку она бы увеличивалась на 400% или 900%. 

Решение: 

Картинка увеличивается только при наведении :)
Просто замените код стиля приведенный выше на этот:

img.PostSummary__image:hover { width: 100%; max-width: 600px; height: auto; margin-right: 10px; margin-bottom: 30px; transition: .2s all ease; z-index: 9999; position: absolute; }

P.S. Если кого-то из дизайнеров голоса раздражает такое - ни в коем разе не хочу обидеть front-end разработчиков :)