Перейти к публикации

Рекомендованные сообщения

Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.

<div class="wrapper">
    <div class="demo-content">
   <div class="part">
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg>
            <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg>
            <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg>
            <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption>
   </figure>
    </div>
   </div>
</div>
        <div class="wrapper">
    <div class="demo-content">
        <div class="part">
  <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg>
            <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg>
            <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg>
            <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption>
        </figure>
 </div>
  </div>
  </div>
*, *:after, *:before {
    box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
}
 
 
.wrapper{margin:0 auto}
 
.demo-content {
    text-align: center;
}
.part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center}
 
figure.img-box {
  text-align: center;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 3px 3px;
   max-width: 300px;
  width:100%;
  background-color:#DCDCDC;
  -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf);
  box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf);
}
figure.img-box * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
figure.img-box img {
  max-width: 100%;
  vertical-align: top;
}
figure.img-box figcaption {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    align-items:center;
    z-index:1;
    display: flex;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
    flex-direction:column;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
    justify-content:center;
    
    opacity:0;
}
 
figure.img-box:after {
  border: 8px solid #FF0000;
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  bottom: 50%;
  left: 0;
  right: 0;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  opacity: 0;
}
 
figure.img-box:hover img {
  opacity:0.2;
}  
figure.img-box:hover:after {
  top: 0;
  bottom: 0;
  opacity: 0.9;
}
.img-box .imgone {
 font-family:'Roboto',sans-serif;
    color:#00008B;
 font-size:16px;
    font-weight: 400;
    
    margin: 0;
    padding:0 10px;
    
    transform: scale(0);
  -webkit-transform:scale(0);
  -ms-transform:scale(0);
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
 -ms-transition: all 1s ease 0s;
 }  
.img-box:hover figcaption, .img-box:hover .imgone {
    transform: scale(1);
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
    opacity: 1;
}

скриншоты прилагаю

сафари.jpg

операхром.jpg

ие11.jpg

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

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

  • Похожие публикации

    • Автор: Махардзе Иосиф
      Приветствую, не судите пожалуйста строго, я начинающий верстальщик, итак, при вёрстке сайта столкнулся с проблемой, имеется изображение поверх надо наложить пару flex элементов, но ни как не получается, они вытесняют друг друга, margin и background использовать нельзя, изображение обязательно должно быть в теге img а блок контейнер резиновый т.е. без указания абсолютных величин, одним словом должно получиться так как на картинке.

    • Автор: de3ok
      Есть контейнер в котором много других контейнеров. Как сделать заполнение друг за другом с переносом в случае если контейнеру не хватает места. (пример на пикче)

      У меня получается либо контейнер занимает все свободное место по горизонтали, либо по вертикали. Но ни как не друг за другом " одной колонкой"

    • Автор: Yurii.Vovchuk
      Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка).
      Применил align-items:flex-start, думал что сработает, но нет...

  • Статистика пользователей

    47 323
    Всего пользователей
    1 451
    Рекорд онлайна
    PoliWik
    Новый пользователь
    PoliWik
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...