Содержание
При наведении на блок появляется описание, и исчезает когда курсор покидает его.
Создадим HTML разметку.
Блок с классом blocks — обёртка для всех блоков. Див с классом block — это сам блок с каким-то содержимым. Блок c классом block__hidden — это скрытый элемент, который будет появляться при наведении на block .
Мы задали классу block display: flex (+ выравнивание), чтобы спозиционировать внутренние элементы строго по центру. Также скрыли описание (opacity: 0), а при наведении показали (opacity: 1).
Чтобы эффект появления был интересней, можно добавить плавность появления блока при наведении курсора с помощью свойства transition и CSS3 свойств transform: scale и transform: rotateZ . Чтобы наше описание появлялось с увеличением и поворотом по оси Z.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Тогда здесь можно применить CSS3, что по функциональности позволит выставить окно под любой дизайн. Так как это окно можно красиво и под основной стиль портала сделать. Здесь оно идет стандартно, разве только тени прописаны под светлый фон.
Нам нужно только задействовать 2 класса, где один идет под определение, что когда будет появляться описание, или картинка с краткими названиями, где можно закрепить ссылку на переход на другую страницу. Второй класс идет под стиль на форму, в нашем случай как видим, это синий квадрат, что вы будете ставить, то аналогично, все под класс прописываем.
Так выглядит, после когда поставите на интернет ресурс.
Здесь пишем описание — что в окне отображается.
.sometan-onetization <
position: relative;
margin: 6px auto;
background: #3d58bb;
height: 137px;
width: 137px;
border: 3px solid #f3f1f1;
box-shadow: 0px 1px 14px rgba(88, 81, 81, 0.43), 1px 2px 30px 3px rgba(27, 25, 25, 0.32);
border-radius: 3px;
cursor:pointer;
>
.kimone-tization <
display:none;
margin-left:-393px;
padding:7px;
margin-top:21px;
background:#f3f3f3;
height:128px;
-moz-box-shadow:0 7px 7px rgba(25, 24, 24, 0.41);
-webkit-box-shadow:0 7px 7px rgba(19, 18, 18, 0.37);
box-shadow:0 7px 7px rgba(19, 18, 18, 0.37);
>
.sometan-onetization:hover .kimone-tization <
display: block;
position: absolute;
top: 115px;
z-index: 9999;
width: 398px;
background: #d8d8dc;
border-radius: 5px;
>
На этом вся установка закончена, где выставили функцию на Появление текста с эффектом, что происходит при наведении клика на блок или каркас, возможно изображение.
Также самостоятельно все подгоняем под свою структуру, это нахождение каркаса, что можно как приподнять, так и опустить ниже, все редактируем в CSS, а в коде только вписываем или выставляем, то что будет появляться.
- 2019-12-24
- 15
- Декабря
2014
Доброго времени суток. 🙂
Сегодня хочу показать Вам два способа как можно организовать появление блока при наведении на другой блок, используя только CSS.
Первый способ, когда блок появляется как-бы поверх основного блока, но не выходя за его границы. Данный способ мне пригодился при создании темы для онлайн кинотеатра, а именно для организации появления знака play при наведении на постер фильма.
Второй способ по сути такой же, но в нем второй блок появляется в виде выноски.
И так приступим.
Способ номер один
Данный способ очень простенький и его суть заключается в следующем.
1. HTML разметка
Тут все просто, нужно внутри одного div-а разместить второй как в примере ниже
2. Стили CSS
Тут тоже нет ничего сложного, просто прописываем стили для блоков. Для первого задаем размеры и position:relative
для второго position:absolute и позиционирование left, bottom, right, top, также свойство display:none.
Способ номер два
Данный способ по сути — то же самое, но с некоторым изменением стилей. Для удобства я поменял название классов, чтобы не запутаться.
1. HTML разметка
2. Стили CSS
Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.
На этом Все, спасибо за внимание 🙂
Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂
Проголосовало: 88, в среднем: 4.8 из 5
Доброго времени суток. 🙂 В этой статье хочу показать маленький, но полезный скрипт, который поможет вам загружать iframe с задержкой. Если вы занимаетесь версткой или наполнением собственного сайта и столкнулись…
Доброго времени суток. 🙂 Сегодня хочу рассказать как сделать небольшую полезную штуковину в виде списка у которого скрыты последние пункты. Рассказать вам, как сделать спойлер, выпадающий список скрытых последних пунктов.…
Доброго времени суток. 🙂 В этой статье хочу показать небольшой скрипт, который вам поможет закрывать модальные окна нажатием вне их области. Небольшая мелочь, но очень полезна при верстке сайтов с…
Доброго времени суток. 🙂 Сегодня, хочу показать вам jQuery скрипт, который будет определять открыт ли сайт на мобильном устройстве или на десктопе. Если вы занимаетесь версткой то знаете что такое…
Спасибо за вашу статью, очень интересна. Скажите а можно ли сделать чтобы блок появлялся через несколько секунд сам, а не при наведении.
У меня есть статья, как сделать окно, которое появляется с задержкой после загрузки сайта. http://gnatkovsky.com.ua/vsplyvayushhee-modalnoe-okno-pri-zagruzke-sajta-s-zaderzhkoj.html
Легко!
Возьмём пример кода, чтобы при наведении на объект он плавно исчезал.
В конце скажу, как сделать, чтобы он плавно появлялся.
Текст, который будет выводиться на экран
CSS часть:
#название <
transform: scale(0.3);
transition:0.3s all; (перед "s" можно указать скорость в секундах. ВАЖНО. НЕ 0запятая5, А 0точка5 Иначе не будет работать. После секунд идёт указание для чего применяется анимация all- все объекты)
Далее просто можно указать внешний вид (стили).
background-color:;
color:;
padding:;
margin:;
border-radius:px; (сглаживание)
opacity:; (прозрачность)
box-shadow: 15px 15px 90px black; (Тень. Первое значение- тень по горизонтали, второе -по вертикали, третье это размытие и последнее — цвет тени)
width:px;
height:px;
display:block;
text-align:; (положение текста)
font-weight:;
font-size:;
#test:hover <
transform: rotate(360deg) scale(0.3);
opacity:0;
>
Rotate — поворот. Если нужно чтобы объект просто исчезал можно не писать или написать 360deg — это поворот на 360 градусов, но, поскольку объект и так на 360 градусах, он не повернётся) можно установить 3600deg эффект будет тот-же.
Opacity — если нужно, чтобы объект исчезал, то нужно применить прозрачность — в нашем случае можно ставить на 0. Это означает, что За указанное время объект будет уменьшать прозрачность. Если нужно наоборот, чтобы объект появлялся, то в стилях ставим opacity:0; а в последней строке opacity:1;
Загрузка...
