Search the Community

Добрый день. Размещено 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, то ли я чего то не понимаю

Добрый день. При наведении на родительскую ссылку, дочерняя картинка и текст плавно меняют прозрачность: <a href="/pages/viewpage.action?pageId=936411868"><img src="/download/attachments/978223304/tk.png"/><span>Вакансии</span></a> .colo > div a span, .colo > div a img { transition: all .5s linear 0s; -o-transition: all .5s linear 0s; -moz-transition: all .5s linear 0s; -webkit-transition: all .5s linear 0s; -ms-transition: all .5s linear 0s; } .colo > div a:hover img, .colo > div a:hover span {opacity: .7;} Но помимо прозрачности происходит изменение размеров картинки, где то пикселей на 1-2. Менял all на opacity, linear на ease - так же странно работает. Подскажите пожалуйста, что это может быть?

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

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

Что-то не нашел данной информации, хотя в определенных случаях оно автоматически отменяется. В этом примере сделал прокрутку длинного текста. Если кликнуть на "Очень длинный текст для прокрутки", он начнет ездить влево-вправо. Если в момент, когда он едет влево нажать например на "Просто длинный текст", то он мгновенно возвращается назад (так и нужно). А вот если нажать в тот момент, когда он едет вправо, то анимация продолжится до конца. Хотелось бы, чтобы текст при клике возвращался мгновенно.

Всем здравствуйте. Прошу помощи, ни как не пойму как осуществить чтобы блок с текстом опускался при наведении на .top (сейчас он начинает двигаться при наведении на .overlay а если навести ниже на черный фон то магия заканчивается) Может принципиально не тем свойством пользуюсь? или просто не так его применяю? ни как не разберусь. Вот код http://codepen.io/mikhail09/pen/OMvOae

http://jsfiddle.net/Launder/vc73z30v/2/ С 82 строки закомментировано, если снять комментирование переход не работает. С 77 строки полностью аналогичная ситуация и всё работает. Почему такое странное поведение? Как сделать чтоб оба перехода заработали? Спасибо! если кому нужно - код выложу сюда.

Сделал чтоб при наведении на картинку (background) она увеличивалась, но вот запилить "плавность" что-то не выходит... https://jsfiddle.net/degid/0jtyjqaa/5/ Колупаюсь-колупаюсь, а всё никак не могу раздуплиться... transition не на то свойство вешаю штоль...

Здравствуйте. На сайте етсь проблема при наведении на эти инконки http://joxi.ru/xAeeR31SaB4bAy Странно себя ведёт. Кто-то сталкивался с таким? Внизу есть тоже такое наведение, там всё хорошо. http://joxi.ru/1A59OwzSOW81AE

Возможно ли такое?: .button{background: url(play.png);} .button:hover { background: url(play_hover.png); transition:background .5s ease; } У меня плавно изображение на заменяется, как ожидалось. Может это просто не предусмотрено в CSS?

http://cssdeck.com/labs/another-simple-css3-dropdown-menu Собственно всплывающее меню появляется мгновенно при наведении, несмотря на то, что остальные элементы делают это плавно. Можете пофиксить? Спасибо(

Как сделать аналогичную галерею? http://coffee61.ru/ Кое-что я сам сверстал, но работает не корректно. http://jsfiddle.net/kipes/a9dhwgjt/1/

Здравствуйте. Верстаю такую страницу. Хочу сделать красивое появление и затухание при помощи transition для иконки у блока раскрывающихся новостей. http://prntscr.com/3lqfvi Имею такой css: i { opacity: 0; -webkit-transition: opacity @durationStd ease-in-out; -moz-transition: opacity @durationStd ease-in-out; -ms-transition: opacity @durationStd ease-in-out; -o-transition: opacity @durationStd ease-in-out; transition: opacity @durationStd ease-in-out; }И появление происходит как надо (плавно). Но вот при закрытие затухания не происходит, а просто изменяется свойство и элемент мигом исчезает. Подскажите в чем может быть проблема.

Добрый день! Сделала свистоперделки 3D-вращалки на CSS: http://beton-art.ru/ (три штуки под большой инфографической картинкой). В IE не работает, даже в в 11-ом... Что ему мешает выводить информацию в тегах <span class="information">? html: <div id="container"> <div class="t-wrapper"> <div class="item"> <img src="images/1.png" width="300px" /> <span class="information" > <strong>ФАСАДНЫЙ ДЕКОР</strong> <br>Мы выполняем все работы по декорированию дома "под ключ" - от 3D проекта до отделки фасада и монтажа декоративных элементов.<br>При заказе бетонных элементов в нашей студии - дизайн-проект бесплатно! </span> </div> </div> </div> css: .item { height: 207px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .6s; -moz-transition: -moz-transform .6s; -ms-transition: -ms-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s;} .item:hover { -webkit-transform: translateZ(-50px) rotateX(90deg); -moz-transform: translateZ(-50px) rotateX(90deg); -ms-transform: translateZ(-50px) rotateX(90deg); -o-transform: translateZ(-50px) rotateX(90deg); transform: translateZ(-50px) rotateX(90deg);} .item img { display: block; position: absolute; top: 0; border-radius: 3px; box-shadow: 0px 3px 8px rgba(0,0,0,0.3); -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; } .item .information { display: block; position: absolute; top: 0; height: 183px; width: 280px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); box-shadow: none; background: rgb(236,241,244); background: -moz-linear-gradient(top, rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1))); background: -webkit-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -o-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -ms-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 ); -webkit-transform: rotateX(-90deg) translateZ(100px); -moz-transform: rotateX(-90deg) translateZ(100px); -ms-transform: rotateX(-90deg) translateZ(100px); -o-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s;}

После долгих мучений я все таки выяснил что за гадина не дает быть анимации в crome и safari... Это свойство transition..когда его вставляю в код transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;перестает реагировать..не вращается.... Как обойти?