Подписаться на рассылку:

Ваш e-mail:

Ваше имя:

Авторизация:

Регистрация Забыли пароль ?

Меню в изображении

Меню в изображении

Всем привет, сегодня вместе с Вами мы реализуем меню внутри изображения, при помощи языка CSS. Выглядеть это будет следующим образом: Мы реализуем блок, в который поместим изображение, и создадим обычный блок с меню. А в стилях поступим следующим образом, при наведении на основной блок, в котором будет находиться изображение, а также меню, наложим меню на изображение. Давайте приступим.

<html>
<head>
 <title>Меню в картинке</title>
 <link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
  <div class="block">
    <p>Меню в картинке</p>
    <div class="none">
      <p>Меню:</p>
      <a href="#">Альпы</a>
      <a href="#">Гималаи</a>
      <a href="#">Карпаты</a>
    </div>
    <img src="images/image.jpg" alt="фото" />
  </div>
</body>
</html>

Реализуем меню при помощи стилей:

body {
  margin: 0;
  padding: 0;
}

.block {
  margin: 10px auto;
  position: relative;
  width: 200px;
}

.block p {
  text-align: center;
}

.none {
  background: rgba(0, 0, 0, 0.5);
  border: 6px solid #999;
  display: none;
  position: absolute;
  height: 190px;
  width: 190px;
}

.none p {
  color: #fff;
}

.none a {
  color: #fff;
  display: block;
  text-align: center;
}

.none a:hover {
  text-decoration: none;
}

.block:hover .none {
  display: block;
}

Вот и все, наше меню готово. Мы выравниваем блок по центру экрана, задав ширину в 200 пикселей, т.к., ширина картинки равна 200 пикселей, и задаем относительное позиционирование. Выравниваем абзацы по центру. Что касается остальных красивостей, в смысле цвет, подчеркивание и т.д., я объяснять не буду. Ведь наша задача состоит в том, чтобы реализовать меню внутри изображения. Для этого у нас существует отдельный блок, которому мы задаем черный цвет фона, с полупрозрачностью в формате rgba, рамку в шесть пикселей со всех сторон, фиксированную ширину и высоту и самое главное выбиваем блок из потока абсолютно спозиционировав его. Таким образом, мы получаем блок поверх картинки. Но это не все, при помощи свойства display, мы скрываем его, а при наведении на блок курсора мыши вновь делаем блочным и получаем эффект появляющегося меню внутри изображения при наведении курсора мыши.
Думаю, код доступный и не требует излишних комментариев. Что хотелось бы сказать, для этого примера Вам понадобиться любое изображение размером 200х200 пикселей. Изображение, которое использовал я, Вы можете взять отсюда. А на этом я прощаюсь с Вами, до скорого дорогие друзья!

5 последних свежих статей:

Методы alert, prompt, confirm в JavaScript

Методы alert, prompt, confirm в JavaScript

И снова я приветствую Вас в очередной теме посвященной языку JavaScript, в которой мы разберем методы alert, prompt, confrim.


Конструкция switch-case в JavaScript

Конструкция switch-case в JavaScript

Всем привет, сегодня мы рассмотрим с Вами конструкцию switch-case в языке JavaScript.


Всплывающая подсказка на CSS

Всплывающая подсказка на CSS

Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS.


Псевдокласс target в CSS

Псевдокласс target в CSS

Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target, для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.


Как вставить видео с YouTube

Как вставить видео с YouTube

Довольно часто Вы видите на различных ресурсах видео, которое хранится на сервисе youtube, но каким-то образом его можно воспроизвести на данном сайте. Об этом сегодня пойдет речь, и я расскажу Вам, как вставить видео с YouTube.

Добавить комментарий: