Jump to content

Report

  • Similar Content

    • 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; } скриншоты прилагаю



    • By ShaxaY
      Доброго вечера форумчане . После просмотра уроков верстки, решил самостоятельно сверстать макет (скачать)
      При наведении на .about-team, мета должна выезжать вверх c прозрачным фоном и так-же появляются соц сети, уже несколько часов ломаю голову, но никак не получается сделать все нормально, взглянув на код вы сами сделаете выводы))
      Уважаемые эксперты, просьба: Направьте меня на путь истинный. Как бы вы все это оформили?
      п.с Простите за быдло код
       
      <section class="team center-block-main"> <h2>Meet Us</h2> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer <img class="meta-soc" src="image/soc.png"></p> </div> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p> </div> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p> </div> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p> </div> </section>  
      .team{ font-family: 'Roboto', sans-serif; text-align: center; } .team h2{ font-size:1.875em; color:#454546; font-weight: 600; margin-bottom: 30px; } .about-team{ float:left; width:21%; margin-left: 4%; position: relative; font-size:0; text-align: center; } .meta-info{ position: absolute; background: rgba(114,107,101,0.9); padding: 10px 77px; bottom: 0; font-size:14px; color:#fff; font-weight: 300; } .meta-info span{ font-weight: 500; font-size: 18px; } .about-team:hover .meta-info{ background: rgba(29,222,133,0.7); top:0; bottom: 0; left: 0; right:0; padding: 50% 0 0 0; -webkit-transition-duration: .1s; -moz-transition-duration: .1s; -o-transition-duration: .1s; transition-duration: .1s; } .about-team:hover .meta-soc{ display: block; } .meta-soc{ border-top: solid 1px #fff; border-bottom: solid 1px #fff; display: none; } .about-team:first-of-type{ margin-left:0; }  


    • By aqua.77
      Как заставить при наведении мыши на один элемент  применить фон для другого элемента? или альтернативу предложите. https://jsfiddle.net/v662rftm/
    • By Kelenar
      Есть блок с псевдоэлементом.
      При наведении на блок (:hover) - появляется псевдоэлемент.
      НО при перемещении курсора с  блока на появившийся псевдоэлемент. Псевдоэлемент не пропадает, а остается пока виден пока на нем наведена мышь. Почему???
      http://jsfiddle.net/AYB26/31/
    • By Kelenar
      Возможно ли сделать две разные анимации (именно animation) для элемента при наведении на него мышью (:hover) средствами CSS?
      Т.е. навели мышь на элемент сработала первая анимация, убираем мышь срабатывает вторая анимация.
      P.S. transition не позволяет добиться сложных перемещений блоков, поэтому не подходит
×
×
  • 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