Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Зачем Вы изучаете программирование/создание сайтов?

Программирование на C++ для начинающих

Бесплатный курс по C++ даст Вам отличный старт для начала программирования на этом языке. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,
заполните форму

Другие курсы

5 шагов и профессиональный сайт готов

После семинара:

- Вы будете иметь чёткий план действий.

- Вы сможете начать создавать сайт.

- Вы сможете легко ориентироваться в информации по созданию сайтов.

Записаться

Другие курсы

Кто больше молчит, того больше слушают.

Неизвестный

Форум сайта MyRusakov.ru

Новая тема Ответить

04.09.2014 19:06:41 Миниатюры на CSS Сообщение #1

ilyadeniso

Новичок

Дата регистрации:
23.02.2014 17:16:59

Сообщений: 14

Всем привет, давно мучаюсь с проблемой, нужно сделать так, чтобы при наведении на миниатюру, на ней появлялся текст. Заранее спасибо.

Профиль Ответить

07.09.2014 08:53:11 Миниатюры на CSS Сообщение #2

Ruslan333

Новичок

Дата регистрации:
29.08.2014 21:57:20

Сообщений: 4

Не очень понял, что за миниатюра, но :
1) Для того, чтоб при наведения курсора картинка изменялась,
есть функция hover.

h1 {
color : blue;
background: red;
}

h1: hover {
color : red;
background: blue;
}

Если ты имеешь в виду фотку , то почитай в гугле про сss спрайты.

Профиль Ответить

09.09.2014 12:05:54 Миниатюры на CSS Сообщение #3

tikkiwiki

Модератор

Дата регистрации:
15.11.2013 15:36:59

Сообщений: 194

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>test title image</title>   <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /></head><body>   <p>      <a href="java script:;" title="Image">         <span>Это подсказка, как и было задумано.</span>         <img src="images/test-img.jpg" alt="Это картинка, при наведении на которую появляется красивая подсказка. Сделано без JS." />      </a>   </p></body></html>

* {padding: 0; margin: 0}body {padding: 40px; font: 24px Arial, Tahoma, Verdana, sans-serif}p {text-align: center}img {border: 0}a {position: relative; display: inline-block; width: 226px; color: lightblue; text-decoration: none; cursor: default}a:hover {background: transparent}a span {display: none; width: 200px; position: absolute; top: 50%; left: 50%}a:hover span {display: block; border: 3px solid #e5e5e5; opacity: 0.9; background: #5d5d5d; filter: alpha(opacity=90)}

Если использовать конструкцию:
<a><img /></a>, то можно и без js

Профиль Ответить

21.03.2015 19:55:16 Миниатюры на CSS Сообщение #4