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/     и они еще должны выезжать  анимацией

Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай.
body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }  

Добрый день.

Появилась следующая проблема:
При отображении сайта в любых браузерах - все работает корректно, кроме Google Chrome. Съезжает шапка сайта, а точнее то, что в css указывал позиционировать справа - располагается в левой части и закрывает логотип.

Ну уж очень меня это напрягает. Не пойму, что нужно делать.

Кто сталкивался с такой же проблемой?

Сайт - ganzola.ru

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

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