Как при наведении мыши картинка

Увеличение изображения, блока при наведении

Доброго времени суток. 🙂
Сегодня хочу показать Вам небольшой и не тяжелый способ, как с помощью CSS можно организовать увеличение изображения, блока при наведении курсором на него. Вы могли видеть не раз на других сайтах, или у Вас просто возникала идея как можно организовать такой простой эффект как увеличение при наведении.
Допустим у Вас на главной выводятся тизеры записей, новостей товаров и тд, и Вы хотите, чтобы при наведении на изображение тизера, оно немножко увеличивалось. Или вы организовали свои кнопки в ряд, например кнопки соц сетей и хотите тоже добавить этот эффект, будет смотреться очень не плохо. Примеров и идей куда можно использовать данный пример более чем. Как примерно это будет выглядеть, смотрите в примере ниже.

Для того чтобы организовать такое увеличение, я предлагаю два способа. Оба на чистом CSS, без использования JavaScript. Первый способ увеличивает блок или картинку, в зависимости к чему Вы собираетесь применить данный метод, без влияния на остальные элементы страницы. Он как бы увеличивается поверх остальных. Для того чтобы организовать такое плавное увеличение, нужно:
1. Определится какой элемент будет. В нашем случаи это будет блок с классом block

2. Выводим его в нужном месте html кода нашего сайта

В файле стилей присваиваем ему следующие параметры:

Можно проверять готовый результат. Ширину, Высоту, фон и другие параметры задаем какие угодно, главное указать правильно параметры -transform — отвечающий за размер увеличения, причем просто в блоке его трогать не надо, он по умолчанию 1 — исходный размер, а вот при свойстве :hover мы его меняем на нужное, до какого размера будет увеличение, в данном случаи 1.2.
Конечно же Вы можете изменить наоборот, допустим если Вам нужно плавное уменьшение при наведении, тут никто не запретит Вам этого сделать.
Следующее свойство — это -transition, отвечающее за скорость анимации в миллисекундах. Если его не использовать, все будет резко увеличиваться и уменьшаться. В данном примере значение этого параметра — 550ms.

Второй способ немного отличается от первого. Его анимация, увеличение происходит с влиянием на другие блоки и элементы страницы. При увеличении он как бы отодвигает их в стороны. Тем не менее, данный способ, тоже применяется и многим именно он и понадобится для решения конкретной поставленной задачи.
И так что же нам нужно сделать для того, чтобы организовать такое плавное увеличение при наведении?

1. Как и в первом примере определяем блок с классом уже block2

2. Опять же выводим в нужном месте

И присваиваем ему стили:

В данном случаи, мы просто изменяем размер блока в пикселях и добавляем свойство -transition, которое делает плавным увеличение. В отличии от первого способа, мы указываем время анимации не в миллисекундах, а в секундах. На примере — это 2 секунды. Вот такими не хитрыми способами можно сделать плавное увеличение не прибегая к использованию скриптов. Можно обойтись чистым СSS.

Старые версии браузеров, могут не понять что от них хотят, поэтому смотрите сами. Лично я не обращаю внимания и не забиваю голову плохим с тем, что возможно, 1 из миллиона зайдет на мой сайт с древнего убогого Internet Explorer и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт 🙂

источник: gnatkovsky.com.ua

Создание сайтов, продвижение, заработок!

Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class=»animate1″ , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками < и >. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 <
filter: alpha (Opacity=25);
opacity: 0.25;
>
img.animate1:hover <
filter: alpha (Opacity=100);
opacity: 1;
>

Результат будет такой:

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 <
filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
>
img.animate1:hover <
filter: alpha (Opacity=100);
opacity: 1;
>

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1 <
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover <
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
>

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1 <
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover <
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
>

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

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :

И добавляем следующие описания стилей:

div.rotate1 <
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
>
div.rotate1:hover <
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
>

Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.

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

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент a> . Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 <
background: url (img/button.png); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
>
a.rotate2:hover <
background-position: 0 -30px; /* Смещение фона */
>

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:


И добавим css-стилей:

.animate2 <
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
>
.animate2 img <
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
>

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:


Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :

.animate2:hover img.second, .animate2 img.second:hover <
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
>


А если добавить свойство transform :

.animate2:hover img.second, .animate2 img.second:hover <
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
>


Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.

источник: webcodius.ru

→ BlogGood.ru ←

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

Многие веб-мастера на своих сайтах в меню или на кнопках используют такой эффект, когда картинки меняются при наведении на них курсора мышки. Если вас интересует, как осуществить такой эффект, то в этой статье, я расскажу о трех способах, с помощью которых можно сделать так, чтобы картинка менялась при наведении на нее курсора мыши.
Использую чистый CSS, без JavaScript и jQuery.

Способ №1 – использование двух картинок
Подготовьте два изображения. Они должны быть одинаковых размеров, но различными по цвету.

Теперь вставим эти две кнопки в файл:

Способ №2 – использование одной картинки
Подготовьте одну картинку. Но на картинке должно быть два изображения кнопки разных по цвету.

Вы, наверное, задаете себе вопрос, как картинка будет меняться на другую, если она одна?! Легко, за счёт использования свойства background-position .
Замена одного изображения на другое происходит с помощью сдвига по вертикали. Вот и все чудеса! Смотрите на код:

Способ №3 – использование одной картинки и CSS-эффект

Возьмите картинку из способа №1, например, « knopka-1.png ». Здесь нам понадобится только одна картинка. При наведении на картинку мышкой сработает CSS-эффект. Смотрите на код:

Вот такие вот пироги на сегодня!

Добрый день. Спасибо за блог, познавательно. Скажите, возможно ли с помощью CSS сделать, чтоб не конпка при наведении менялась, а надпись? Причём кнопок много и надписи разные. Или нужно функцию создавать?

Спасибо за оперативность, но немного не то. Нужно чтоб менялся не стиль оформления текста на кнопке, а сам ТЕКСТ. т.е. на кнопке написано “Да”, при hover надпись должна меняться на “Нет”. такое возможно?

При нажатии на кнопку будет меняться текст:

Чтобы изменился текст при наведении на нее мышкой, воспользуйтесь вот этим кодом:

Ух ты! Спасибо! Всё-таки функция, да ещё с явой! Спасибо большое! При первой возможности опробую

Статья хорошая. А вот как сделать при наведение на картинку что с права левая картина изменила цвет ну типо правые варианты цветов а левая товар которая меняется в цвете.

а вы гуглили этот вопрос? Пробовали разобраться самостоятельно?

источник: bloggood.ru

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Заменить одну картинку на другую при наведении на неё курсора мыши.

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

  1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
  2. Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
  3. Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
  4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 1. Использование псевдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.

Эффект перекатывания с одним рисунком

Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

источник: htmlbook.ru

Как менять картинку при наведении курсора мыши

Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример — это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.

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

У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.

HTML-код очень простой:

.img <
background: url(«image_1.jpg») no-repeat; // Подставляем картинку по умолчанию
height: 100px; // Высота картинки
width: 100px; // Ширина картинки
>
.img:hover <
background: url(«image_2.jpg») no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
border: 2px solid #f00; // Устанавливаем красную рамку
height: 120px; // Высота новой картинки
width: 120px; // Ширина новой картинки
>

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

Данный способ является классическим, который постоянно используется для создания динамических эффектов без использования JavaScript, думаю, что Вы будете его использовать ещё не раз.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 63 ):

    Еще бы не помешало познакомиться с другими псевдоклассами. А также картинку можно менять и средствами JavaScript (событие )

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

    Через JS метод более извращенный и он хуже тем, что не у каждого пользователя включен JS.

    Ещё бы не помешало познакомиться со спрайтами и сэкономить на дополнительных картинках 🙂

    на js можно зделать более интересней смену картинок. хотя сам тоже пользуюсь css

    Все понятно доступно Спасибо за науку!

    Михаил! А как сделать, чтобы при наведении на кнопку она не сразу становилась красная к примеру, а медленно начинала краснеть!))) И тоже самое при отведении мыши от кнопки? Надо сделать к примеру в фотошопе gif анимацию и в css коде указать путь.gif так?

    Можно и так, а можно через JavaScript это сделать.

    На моём сайте все кнопки были сделаны при помощи js! Но как тут уже писали не у всех он включён! Переделал всё на css! Спасибо за ответ!

    источник: myrusakov.ru

    Как сделать в css увеличение картинки при наведении на нее?

    Давно что-то я не писал полезных постов об использовании css. Сегодня хочу рассмотреть, как делать в css увеличение картинки. Это можно делать при наведении на нее, а также само увеличение может происходить плавно или резко. И все это можно делать по-разному. Если вам интересна эта тема, предлагаю внимательно прочитать эту статью, и вы узнаете как минимум несколько способов увеличения картинки в css.

    Начальная заготовка

    Для нашей статьи я нашел вот такое замечательное изображение:

    В html я вставил ее следующим образом:

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

    Простое резкое увеличение

    Чтобы менять внешний вид картинки при наведении на нее, мы будем использовать псевдокласс hover. Подробнее о нем вы можете читать здесь. Способ заключается в том, чтобы просто изменять ширину картинки. При изменении ширины высота также автоматически изменяется. Например, сейчас ширина этого изображения — 320 пикселей. Давайте немного увеличим:


    Заметьте, что увеличивается также и высота, но все это происходит резко. Вы можете также задать и второй параметр — высоту, но тогда можете нарушить пропорции картинки.

    Плавное увеличение за счет трансформаций

    Теперь мы рассмотрим абсолютно другой способ. Во-первых, изменение размеров будет происходить плавно. Во-вторых, вместо изменения ширины мы воспользуемся трансформациями — это нововведение css3.

    Чтобы активировать плавный переход, нужно добавить самой картинке (не картинке по наведению) свойство transition . В нем нужно указать время, за которое должен быть произведен переход. Также можно добавить другие параметры, но на этом я не буду подробно останавливаться сегодня.

    Мы говорим браузеру, что изменения стилей для элемента с классом butterfly должны происходить не резко, а растягиваться по времени на 4 десятых секунды. Отлично, осталось сделать саму трансформацию при наведении на картинку:

    Увеличение элементов делается с помощью свойства transform и его значения scale(увеличение по горизонтали, по вертикали) . Таким образом, если вы хотите пропорционально увеличить изображение, оба значения должны быть одинаковыми. Задавайте значения исходя из того, что 1 — это нормальный размер картинки.

    Соответственно, в записи выше мы при наведении увеличиваем картинку на 15% с каждой стороны и это происходит плавно. Вот как это выглядит:

    Неплохо, да? Таким образом, для изменения размеров вы можете использовать либо изменение ширины, либо трансформацию. У этих двух способов есть отличия. Если вы изменяете размеры с помощью width , то картинка увеличивается и двигает все содержимое, которое находится возле нее. В случае с трансформациями такого не происходит.

    Изменение размера только по одной стороне

    Если вам нужно в css увеличить картинку при наведении только по одной стороне, то это также проще всего сделать с помощью трансформаций. Просто напишите так:


    То есть после ключевого слова scale явно указываем координату — X или Y .

    источник: dolinacoda.ru

    Всплывающая картинка при наведении на ссылку на CSS

    Здравствуйте, друзья! На моем блоге уже есть информация о всплывающих подсказках на CSS, но сегодня будем делать еще более интересный эффект, это всплывающие картинки при наведении курсора. Этот эффект имеет достаточно широкое применение, но я все чаще замечаю подобное на интернет-магазинах, где при наведении на название товара, появляется его изображение или же увеличение картинки при наведении. Конечно такие эффекты можно разнообразить с использованием JavaScript или jQuery, но мы с вами воздержимся от всевозможных скриптов и будем делать всплывающие картинки только на CSS. Надеюсь, что вы уже знаете, что такое псевдокласс hover. Вот Его-то мы и будем использовать в наших всплывающих картинках и вот, что у нас должно получится.

    Первое, что нужно сделать, это добавить в файл стилей следующий код:

    Теперь, к ссылкам нужно прописать класс tooltip и в теге span разместить ссылку на картинку. Выглядит это вот так:

    С абсолютным позиционированием могут возникнуть проблемы, если вы делаете эффект всплывающих изображений к разным элементам на странице. Картинки могут всплывать не в том месте, где вам нужно. Но это вполне поправимо и можно исправить при помощи отступов. Ну вот, теперь вы знаете как сделать увеличение картинки при наведении мыши с помощью CSS. Используйте данный код для экспериментов, возможно что-то интересное у вас все же получится. при помощи CSS еще можно сделать таблицу зебру. Все вопросы о том, куда вставлять код и т.п. — писать в комментариях. 🙂 А еще я попрошу вас поделиться этой записью в социальных сетях. Заранее благодарю.

    Читайте также:

    Александр , 2 вопроса:
    1. Возможно ли это сделать в вордпрессе?
    2. Если да, то почему Вы сами этого не делаете?

    1. Возможно сделать где угодно
    2. Пока нет в этом необходимости.
    Если бы я все примеры применял на блоге, то во-первых файл стилей весил бы несколько мегабайт, что отрицательно сказалось бы на скорости загрузки страниц и во-вторых — блог выглядел бы как новогодняя елка. 🙂

    Сделайте, пожалуйста, пример всплывающей картинки в статье.

    источник: serblog.ru