Jump to content

Recommended Posts

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

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
Reply to this topic...

×   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.

  • Similar Content

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

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

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

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

  • Member Statistics

    47,215
    Total Members
    1,451
    Most Online
    RossProxy
    Newest Member
    RossProxy
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Full-R Естественно его там быть не должно, вы ведь перепутали значения маркированного и нумерованного списка. Тот атрибут, о котором речь в теме - считается актуальным, что мне и показалось весьма странным. Перечитайте тему внимательней.
    • Здравствуйте!Простите, если не сюда пишу.Уже несколько дней не могу найти свою ошибку.Прошу помощи.Пишу сайт.Вверху страницы горизонтальное меню - фиксированное.Под горизонтальным меню вставляю видео с текстом. Видео затеняется с помощью overlay.Все вставляется, но под видео большой отступ, заполненный тенью от видео.Как убрать большой отступ?На скрине выделена область, которую необходимо убрать.Сильно не пинайте, пожалуйста, только начинаю изучать это дело.Сайт запускаю на OpenServer. В веб еще не выкладывал. Index <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Мой сайт</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <link rel="stylesheet" type="text/css" href="style/style-video.css"> <link href="https://fonts.googleapis.com/css?family=Merriweather|PT+Sans+Caption:400,700&display=swap" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="favicon/favicon.ico"> </head> <body> <div class="fullscreen-bg"> <div class="overlay"> <h1>Простой пример<br>фонового видео на сайте</h1> </div> <video loop="" muted="" autoplay="" poster="video/fotopromo.png" class="fullscreen-bg__video"> <source src="video/videopromo.mp4" type="video/mp4"> </video> </div> <?php include('header.php'); ?> <div class="layout"> <?php include('nav.php'); ?> <div class="content"> <h1>Название страницы</h1> <p>Бла-бла.</p> </div> </div> <?php include('footer.php'); ?> </body> </html> Style-video .fullscreen-bg { overflow: hidden; z-index: -100; position: relative; height: 100%; width: 100%; padding-top: 45%; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; } .overlay { background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 4; } .overlay h1 { text-align:center; color:#fff; font-size: 70px; margin-top:17%; } @media (max-width: 767px) { .fullscreen-bg { background: url('../video/fotopromo.png') center center / cover no-repeat; } .fullscreen-bg__video { display: none; } .overlay h1 { font-size: 40px; } } Понимаю, что строка 7 в коде style-video отвечает за это, но не знаю как правильно ее прописать.Сейчас там прописано: padding-top:45%;При уменьшении процента, на моем экране хорошо отображается.Но что будет на других экранах?При уменьшении окна браузера, тень опять появляется.
    • Я не обратил внимания что такая глупость может быть у кого-то в мыслях.   Что нельзя делать можно проверить вот тут: Showing results for contents of text-input area - Nu Html Checker (w3.org) В общем на сам атрибут валидатор не ругается, но совершенно ясно что его тут быть не должно. Может быть для каких то скриптов это нужно, но лучше использовать атрибуты data. Они все легальные.   Даже в случае, если подразумевается стиль листа это не документировано.     В основном стилевые атрибуты остаются актуальны только для таблиц. Иногда их можно также встретить в SVG, но это уже другая история.    
  • Popular Contributors

×
×
  • Create New...