Страницы

Поиск по вопросам

четверг, 2 января 2020 г.

Помощь с версткой

#html #css #вёрстка


Подскажите пожалуйста, как в данном коде сделать, чтобы тест выпадал плавно вправо



.content {
      display: inline-block;
      vertical-align: top; /* по умолчанию baseline */
      background: #ccc;
      padding: 5px;
    }
    
    .hide {
      display: none;
      background: #000;
      color: #fff;
      text-align: center;
    }
    
    .content:hover .hide {
      display: block;
    }
    
hover

Text

hover

Text

hover

Text


Ответы

Ответ 1



.content { display: inline-block; vertical-align: top; /* по умолчанию baseline */ background: #ccc; padding: 5px; position: relative; } .hide { background: #000; color: #fff; text-align: center; position: absolute; top: -17px; right: -55px; z-index: 2; width: 0px; height: 30px; overflow: hidden; } .content:hover .hide { width: 50px; transition: width 0.1s; }
hover

Text

hover

Text

hover

Text



Ответ 2



Задание ваше звучит непонятно, что значит выпадал. В любом случае, вот мой вариант: .content { background: #ccc; display: inline-block; padding: 5px; position: relative; } .hide { background: #000; color: #fff; opacity: 0; position: absolute; padding: 4px 10px; pointer-events: none; left: 100%; top: 0; transform: translateY(-50%); transition: opacity 0.9s; text-align: center; z-index: 2; } .content:hover .hide { opacity: 1; }
hover

Text

hover

Text

hover

Text

Скорее всего придётся вам дорабатывать код под себя, также необходимо проверить кроссбраузерность.

Ответ 3



Это внесите в css .content:hover .hide { display: inline-block; }

Ответ 4



.content { display: inline-flex; vertical-align: top; background: #ccc; padding: 5px; } .hide { background: #000; color: #fff; text-align: center; transform: translateX(-100%); width: 0; height: 0; opacity: 0; margin: 0; } .content:hover .hide { transform: translateX(5px); margin-right: 5px; width: auto; height: auto; opacity: 1; } .content:hover .hide { animation-name: anim; animation-duration: 700ms; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 0s; } @keyframes anim { 0% { transform: translateX(-100%); margin-right: 5px; width: 0; height: 0; opacity: 0; } 2% { opacity: 0; transform: translateX(-100%); width: auto; height: auto; } 100% { transform: translateX(5px); opacity: 1; width: auto; height: auto; } }
hover
Text
hover
Text
hover
Text


Комментариев нет:

Отправить комментарий