Вопросы

Как сделать hover эффект на bootstrap, на подобии такого как на рисунке, что-бы сверху появлялась лупа и изображение синело?

Как в bootstrap правильно прижать к правому краю кнопку(«button»), верстать через div>col*-* и задавать col-offset? Или есть специальные бутстраповские классы для этого?

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


<div class="container">
  <div class="row">
    <div class="left-col hidden-xs col-sm-4">
      <div class="thumbnail">
        <img src="images/Pic1.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic2.jpg" alt="...">
      </div>
    </div>
    <div class="middle-col col-sm-4">
      <div class="thumbnail">
        <img src="images/Pic3.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic4.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic5.jpg" alt="...">
      </div>
    </div>
    <div class="right-col hidden-xs col-sm-4">
      <div class="thumbnail">
        <img src="images/Pic6.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic7.jpg" alt="...">
      </div>
    </div>
  </div>
</div>

Здравствуйте! Такой вопрос… У меня все статьи по задумке лежат в одной коллекции. Создал доп поле с названиями категорий и присвоил статьям нужную.
Нужно чтобы при нажатии в сайтбаре на нужную категорию вывелись все статьи категории. Возможно ли сделать это на странице «услуги», то есть мне нужно вывести при заходе на страницу «услуги» сразу все статьи, это у меня сделано, но еще нужно чтобы при нажатии на какую либо категорию остались только статьи той категории. уже неделю не могу реализовать…
Пытался сделать по статье webdesign-master.ru/blog/modx/2016-05-03-modx-ajax-filter.html Но мне нужно просто ссылки на категории, а не фильтрация по всем полям.

Здравствуйте. Вопрос по изображениям.

Что делать, если необходимо расположить рядом несколько изображений разных размеров (например, одно горизонтальное, другое вертикальное, разные по длине и ширине) таким образом, чтобы их общая ширина была равна ширине блока, в котором они находятся, но высота изображений была одна, без потери соотношения их сторон? Возможно ли такое с использованием Bootstrap? При этом, нужно сохранять их адаптивность (т.е. уменьшать при уменьшении размеров экрана). Пробовал класс img-responsive, но он, как я понял, просто вписывает изображение в ширину блока…