[Помогите] Адаптация изображения

YehorVasch · 28 дек 2016

Здравствуйте, снова я. Возникла новая проблема с адаптацией изображения с эффектом. Суть проблемы: Есть 5 изображений, из которых 2 изображения должны быть расположены на одной строке, а остальные три на следующей строке. Это в версии для планшетов и пк, а версии для телефонов необходимо что бы они расставлялись в один список. Первые два изображения отображаются корректно в одну строку, и при мобильной версии расставляются в список. Вопрос! Как заставить следующие 3 изображения отображаться в одну следующую строку в версии для пк и планшетов. Прикрепляю css и html. В примере задан один див на все изображения, но я так понимаю нужно создать новый контейнер для трех изображений ? Что-то вообще запутался помогите пожалуйста.
Извиняюсь если плохо объяснил суть проблемы, добавил описание в пример.

https://jsfiddle.net/YehorVasch/d23syL7b/

Код:

@charset "UTF-8";

* { margin: 0; padding: 0; }

img {
  width: 100%;
  height: auto;
}


.breakpoint {
  max-width: 100%;
  display: inline-block;
}

.container {
  position: relative;
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

section {
  margin: 60px auto;
}

.ghost-button-rounded-corners {
  display: inline-block;
  width: 150px;
  padding: 8px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  outline: none;
  text-decoration: none;
}
.ghost-button-rounded-corners:hover,
.ghost-button-rounded-corners:active {
  background-color: #fff;
  color: #000;
}

.thumbs {
  display: inline-block;
  width: 48%;
  max-width: 100%; /* опционально */
  margin: 5px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.thumbs:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.thumbs img {
  display: block;
  width:100%; /* ширина картинки */
  height: 100%; /* высота картинки */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.thumbs .caption {
  width: 100%;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.thumbs .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.thumbs .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 75px;
}
.thumbs .caption .info {
  line-height: 1.2;
  margin-top: 15px;
  font-size: 20px;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
      content: "";

  opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
  top: 50%;    content: "";

}
.thumbs:focus span, .thumbs:hover span {
  top: 0;
}
.thumbs:focus .title, .thumbs:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.thumbs:focus .info, .thumbs:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

@media (max-width: 760px){
.thumbs {
    width: 100%;
}
}

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Exo+2:300,300italic,500,600&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">

</head>
<body>
  <section id="responsive-images-breakpoints">
    <div class="container">
    <h2>Эти изображения отображаються в 2 колонки на пк/планшетах и в 1 на телефонах</h2>
    <div class="thumbs">
    <a href="#4"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image02.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
    <div class="thumbs">
    <a href="#3"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image01.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
<h2>Эти изображения отображаються в 3 колонки на пк/планшетах и в 1 на телефонах</h2>
    <div class="thumbs">
    <a href="#2"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image03.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
    <div class="thumbs">
    <a href="#1"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image04.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
<div class="thumbs">
    <a href="#1"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image04.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
        <h2>Эти изображения отображаються в 2 колонки на пк/планшетах и в 1 на телефонах</h2>
    <div class="thumbs">
    <a href="#4"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image02.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
<div class="thumbs">
    <a href="#4"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image02.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title"><p><a class="ghost-button-rounded-corners" href="http://mnogoblog.ru/">Просмотреть</a></p></span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
    </div>
  </section>
</body>
</html>

shede · 29 дек 2016

https://jsfiddle.net/d23syL7b/4/

YehorVasch · 29 дек 2016

dm09111 сказал(а): ↑

https://jsfiddle.net/d23syL7b/4/
Нажмите, чтобы раскрыть...

Большое спасибо )

YehorVasch · 29 дек 2016

Еще раз большое спасибо за помощь! Появился еще один вопрос) Новую тему решил не создавать, дабы не плодить.
Для начало покажу, чего хочу достигнуть: https://modnakasta.ua/ (как пример!).
Интересуют баннеры акций как у них. Благодаря помощи сообщества данного форума, уже почти все сделано. Осталось только заставить чтобы возле одной большой картинки (с права или с лева), отображалось еще две картинки по вертикале.
Вот пример скрина:
4

А при переходе в мобильную версию, все должно выстраиваться в один длинный список.

Вот песочница: https://jsfiddle.net/YehorVasch/or9pox2s/

Заранее спасибо!

Perat · 29 дек 2016

Доброго https://jsfiddle.net/Perat/or9pox2s/2/ заключим маленькие боковые блоки в оьдельный блок контейнер

YehorVasch · 29 дек 2016

Perat сказал(а): ↑

Доброго https://jsfiddle.net/Perat/or9pox2s/2/ заключим маленькие боковые блоки в оьдельный блок контейнер
Нажмите, чтобы раскрыть...

Большое спасибо) Выходит для того что бы, допустим, отразить эти картинки не по левому краю, а по правому точно также - необходимо создать новый контейнер для них и соответствующий медиа запрос, я правильно понял?)

Perat · 29 дек 2016

Нет
медиазапрос начинает работь при достижении определенных условий (в нашем случае ширины меньше 760px).
Самое простое поменять последовательность блоков в документе html, те поменять местами (thumbs_box и thumbs big)

YehorVasch · 29 дек 2016

Perat сказал(а): ↑

Нет
медиазапрос начинает работь при достижении определенных условий (в нашем случае ширины меньше 760px).
Самое простое поменять последовательность блоков в документе html, те поменять местами (thumbs_box и thumbs big)
Нажмите, чтобы раскрыть...

Спасибо уже и попробывал))