Report

Добрый день. Размещено 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; } скриншоты прилагаю

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

Люди добрые, помогите разобраться, весь день пытаюсь понять почему у меня не получается.
В общем идея была сделать одну красную кнопку, чтобы при наведении появлялось еще 4 зеленых.
Реализовать попытался 2мя очень похожими способами, через div и через список.
https://codepen.io/lokonaft/pen/GXqBBP - в данном случае почему то не работает transition
https://codepen.io/lokonaft/pen/qMNMVL - в данном случае я то ли не могу правильно задать hover, то ли я чего то не понимаю

Столкнулся со следующим странным поведением.
В хроме пока работает transition, фон просвечивает через border-radius (наведите на первый пункт).
В Лисе градиент имеют такую особенность: полосочка 10px, полосочка 10px, прозрачность, на стыке второй полосочки и прозрачности образуется некий серый фон толщиной пикселя в два. Поскольку фон в примере двухнаправленный, то Вы, убрав одно направление (65 или 66 строчка, не забудте в конце оставленной строчки поставить точку с запятой ), можете увидеть что полоска есть только в том направлении, где нулевой переход из цвета в прозрачность.
По обеим глюкам: что это? откуда это? куда писать? какие способы бороться?
Спасибо за внимание

Экспериментировал над задачей и наткнулся на довольно странное явление: в примере, при переходе, правые полоски дольше держаться, а при появлении, быстрее отображаются. Если убрать фон (4 и/или 52 строчка CSS), то вроде переход и слева, и справа, происходит одинаково... Проверил в трёх браузерах и либо у меня конкретное косоглазие, либо браузеры работают по какому-то определённому алгоритму, который я не понимаю (ну либо в коде я что-то напортачил).
Может кто разъяснит?
Спасибо!