Jump to content
  • 0

Как подогнать css под Safari 5 и IE-11


Xandr555
 Share

Question

Добрый день. Размещено 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

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

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

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

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

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

    • By Govt_sm80
      Привет всем.Не могу поменять размер иконок с сайта https://fontawesome.com/icons/key?style=solid  и не получается сделать такие разделы как на картинке, может кто-то занет как это сделать?      вот ссылка на код    http://jsfiddle.net/kcd86y01/1/     и они еще должны выезжать  анимацией
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy