By
Xandr555
Добрый день. Размещено 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;
}
скриншоты прилагаю
Question
LUC
Не знаю можно ли выкладывать здесь ссылки, поэтому объясню на словах.
Сайт активно использует border-radius, shadow, transition и прочие эффекты. Страницы с фиксированным фоном (jpg 1920х1080, background-attachment:fixed). Все три колонки имеют полупрозрачный бэкграунд rgba(0,166,156,0.2), некоторые блоки внутри них тоже имеют полупрозрачность background:rgba(0,0,0,0.5). Я заметил, что в базовом Хроме весьма заметно тормозит скроллинг страницы. Другие браузеры на вебките рендерят лучше, но по сравнению с Firefox и Edge все равно не очень хорошо. Я начал с отключения всей анимации и эффектов, радиусов и теней, и в итоге пришел к заключению, что Хром спотыкается о полупрозрачные блоки rgba-фоном, растянутые на всю страницу. После замены rgba на жесткий цвет, лаги практически исчезли. Вопрос: это особенность современного Хрома или проблема в чем-то другом?
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
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.