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

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

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

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется 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

Плавное увеличение картинки при наведении на неё курсора мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Взгляните, пожалуйста, как это происходит на примере небольшой фотосессии очаровательной Николь Кидман:

Изображения могут принимать разные размеры. Это зависит от ваших настроек для изображений: до увеличения (например, width=»110″ height=»160″) и размеров оригинальных картинок, которые выводятся в натуральную величину.

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

Если желаете разместить у себя на сайте изображения с таким эффектом, то вам необходимо проделать следующее:

1. Скачать архив с материалом и распаковать в отдельную папку на компьютере.

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

2. Фото из папки images (можно сразу вставить свои изображения или фотографии) загрузить в аналогичную папку на вашем сайте.

3. Папку imagesize с двумя файлами imagesize.css и imagesize.js внутри, загрузить в корневую папку сайта.

4. Путь к этим файлам на созданной странице вашего сайта прописать между тегами head , а ссылки на картинки вставить между тегами body . И получится такая вот «картина маслом»:

Если скопировать коды, выделенные маркером и вставить в определённые места, то получится так:

Размеры изображений в коде выставляйте такие, какими вы хотели бы их видеть до увеличения, например, width=»100″ height=»140″ . А размеры оригинальных картинок также могут быть разными, это хорошо видно на примере. Их можно легко изменить в Adobe Photoshop :

источник: dynamic-site.ru

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

Как изменить картинку при наведении на нее курсора или немного о 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

CSS: увеличение изображения при наведении курсора

CSS: увеличение изображений при наведении курсора мыши на миниатюру

Данная методика позволяет организовать вывод миниатюр на странице, которые при наведении курсора мыши будет увеличиваться до оригинального размера. Только одно изображение нужно для работы метода. Код CSS избавляет вас от рутинной работы по подготовке миниатюр. Также возможно сделать текстовую подпись под большим изображением.

CSS: Ниже приведенный код нужно добавить в раздел HEAD вашей страницы:

HTML:

5 последних добавленных файлов в рубрике»Полезное»

5 самых полезных расширений Google Chrome для веб-дизайнера и разработчика

В этой статье мы собрали список самых лучших и полезных расширений Google Chrome для веб-дизайнеров и разработчиков.

5 самых популярных плагинов WordPress для режима технического обслуживания

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

10 очень полезных плагинов для работы с виджетами на WP

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

10+ лучших бесплатных шрифтов для кодирования и программирования

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

10 бесплатных плагинов для WordPress для добавления и расширения карт

10 бесплатных плагинов WordPress, которые позволят вам как добавлять, так и расширять функциональность карты на вашем сайте.

источник: ruseller.com

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

Доброго здравия, всем кто зашёл на — Sozdaiblog.ru!

Сегодня я расскажу про такой эффект, как плавное увеличение картинки при наведении курсора мыши.

Вы узнаете, как это сделать и что для этого понадобиться.

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

Все они были очень маленького размера, и разглядеть их было довольно трудно.

Я ещё подумал – «Вот автору делать нечего, устроил тут минимализм!», но, после того, как я направил курсор мыши на первую миниатюру, случилось чудо. Произошло плавное увеличение картинки.

Короче, мне этот эффект очень понравился и я захотел узнать, как сделать такое на своём блоге.

Просидев половину дня в Интернете, у меня получилось найти решение данной задачи, и я хочу поделиться ответом с Вами, дорогие мои читатели.

Как обычно, мы будем работать с самым распространённым движком в блогосфере — WordPress.

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

Для того, чтобы сделать плавное увеличение картинки Вам нужно скачать вот этот архив => imagesize.

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

Обычно, это делается с помощью ftp-клиента.

Если, Вы не умеете пользоваться ftp-клиентом, советую прочитать статью – «Как настроить ftp-клиент».

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

Потратьте 2 минутки личного времени и получите необходимый пароль.

После подписки напишите мне на почту, и я его Вам вышлю!

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

Скорее всего, это будет какая-то статья. Тогда, Вам будет нужно найти в папке с темой оформления файл, отвечающий за вывод одиночных записей. Обычно это – single.php .

Открыть его и вставить вот такой скрипт:

Затем, во время написания очередной статьи, переключаетесь из визуального редактора в HTML-редактор и вставляете в текст любое изображение, при помощи следующего кода:

Вот Вам наглядный пример плавного увеличения картинки при наведении курсора мыши:

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

Скажите, а какие способы увеличения знаете Вы?

На сегодня это всё. Ожидайте новых эффектов.

С уважением, Денис Черников!

Интересное по теме:

Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:

53 комментария А что думаете Вы?

Тема интересная, в основном я видел такое решение: щелкаешь по маленькой картинке и по центру экрана появляется ее увеличенное изображение; щелкаешь по большому изображению, оно убирается. На данной странице приведен пример немножко другого плана: когда наводишь мышку на картинку она увеличивается, убираешь мышку, она уменьшается. Данное решение заслуживает внимания, но вот что я здесь заметил. Когда первый раз наводишь на картинку, она увеличивается, мышку убираешь — картинка уменьшается и после этого я вижу, что картинка искажена! И она не такая, как была до первого наведения мышки! Даже страницу обновил, чтобы увидеть, что это так. Видимо, где-то в коде есть недоработка, как говорят — сырой код. Идея хорошая, но плохая реализация.

Денис Черников ответил:
Май 25th, 2012 at 9:47

Может Вам показалось!

У меня всё работает и показывает без искажений!

Это скорее всего, у Вас недозагружаются до конца пикселы!

Я не наблюдаю никаких искажений!

Gri Sant ответил:
Май 25th, 2012 at 11:50

проверял в опере, в этом браузере исажения, а вот в хроме все нормально;

вывод: код не доработан, не во всех браузерах работает

Денис Черников ответил:
Май 25th, 2012 at 12:02

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

Я не писал данный скрипт, да и оперой не пользуюсь! Если Вам не удобно найдите другое решение!

Заодно и мне подскажете, я статью дополню вашим примером

Денис Черников ответил:
Май 25th, 2012 at 12:06

Возможно с оперой какие-то разногласия! Жаль конечно! Но по мне опера не удобный браузер! Это моё личное мнение! Мозила и хром рулят!

Gri Sant ответил:
Май 25th, 2012 at 12:24

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

Денис Черников ответил:
Май 25th, 2012 at 12:31

Возможно! Каждый выбирает, что ему по душе! А под всех, тяжело подстроиться! Кстати, попробую сам доделать скрипт! Видимо нужно прописать код на совместимость! Если в опере при возвращении исказится я думаю, это не большая проблема!

Вот черт.И нафига я по совету «друзей» написал сайт на Joomla, а не на WP?

Денис Черников ответил:
Май 27th, 2012 at 20:04

Не расстраивайтесь, следующий проект обязательно делайте на WordPress!

Мне нравится плавное увеличение картинки. Пользуюсь не всегда. А в общем, это прикольно.

Денис Черников ответил:
Июль 26th, 2012 at 9:34

Да, Надежда, эффект прикольный, особенно, если надо показать читателям мелкие детали чего-либо!

Нам все время чего-то не хватает. Сначала установила плагин Lightbox Plus, но он смотрится просто элементарно и простите,грубо, по сравнению с таки эффектом увеличения фотографии.Единственный минус мне показалось в том, что колышится весь текст внизу, но впечатление зато обалденное.Тоже хочу-))

Денис Черников ответил:
Август 4th, 2012 at 21:55

Рад, что Вам понравилось! Плагины мне не нравятся, они блог нагружают и захламляют!

А скрипт прикольный! Меня буквы даже не смущают, я на картинку смотрю!))))

Ставьте, если по душе пришлось!

Юлия ответил:
Август 4th, 2012 at 22:09

Ни разу в корневую папку не заходила. Нет точнее один раз было дело, после чего пришлось шаблон менять-))Но такой эффект для фотографий меня точно не остановит. Кстати, Денис, может у Вас на сайте есть статья, как сделать, чтобы фотографии с сайта, просто скопированные и закинутые на другой сайт не проявлялись?Это тоже делается через ftp-клиента на хосте.Но как сделать точно не знаю.Подскажите? И есть ли дополнительная нагрузка на сервер сайта, если картинки загруженные на моем просматриваются на другом ресурсе?

Денис Черников ответил:
Август 4th, 2012 at 22:39

Не бойтесь, Юлия! Зайти в корневую папку, всё равно что свет в комнате выключить, каждый день его щёлкаю! Юлия, немного не понял, что значит не проявлялись?

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

Если картинку будут просматривать сразу 1000 человек, то нагрузка будет, потому-что картинка подгружается с Вашего сервера, а так это мелочи, Вы сами можете закинуть все картинки закинуть в Гугл — Picaso и от туда себе подгружать!

Юлия ответил:
Август 4th, 2012 at 22:42

А я сейчас яндекс фотками стала пользоваться, чтобы места много не занимать,и про Picaso уточню, спасибо.

Денис Черников ответил:
Август 4th, 2012 at 22:45

Кстати, тоже вариант, Вы молодчина! Но их нужно не просто ссылками брать, а самим размещать, чтобы их не удалили!

Юлия ответил:
Август 4th, 2012 at 22:47

Я сама их и размещаю для своих статей, а потом в виде фотогалереи на сайт.Удобно-))

Денис Черников ответил:
Август 4th, 2012 at 23:01

Я же говорю — молодцом!)

Почему мои комменты попадают в спам?Тоже хочу сказать, как красиво с этим скриптом-).

Денис Черников ответил:
Август 4th, 2012 at 21:57

Где они у Вас попадают в спам? Если на почте, то просто уберите пометку, что они спам! Если в вордпрессе, то это целая статья!

Прикольно Только вся остальная страница уезжает вместе с картинкой. Хотя. может оно и не плохо. Наверно я просто привыкла в таких случаях, что картинка увеличивается поверх текста (а он еще и затемняется иногда). Но так тоже здорово. Надо себе такое сотворить. Очередное спасибо

Денис Черников ответил:
Август 13th, 2012 at 19:44

А мне очень нравиться, по моему мнению круче остальных, которые в новых окнах открываются и пока на кликнешь не закроются! А эта, как живая, всё сама!

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

Денис Черников ответил:
Сентябрь 7th, 2012 at 0:47

Если это так проблематично, можете заголовок картинки не писать, но в HTML редакторе — «alt» прописать нужно обязательно, внутри ссылки на картинку. Не важно на каком языке. Вы же ключевые слова в тексте транслитом не пишете, нафига тогда к картинке писать.

Эффект очень интересный.

Пишите очень доступно- это не всем дано. Сайт очень полезный, нашел много интересного. Спасибо.

Денис Черников ответил:
Сентябрь 16th, 2012 at 10:40

Пожалуйста, Анатолий! Приходите ещё, материал постоянно добавляется!

Денис Черников ответил:
Октябрь 18th, 2012 at 16:56

Привет, Артём! Скажите, пожалуйста, что у Вас конкретно не получается?

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

Денис Черников ответил:
Октябрь 28th, 2012 at 20:54

Спасибо, за подписку! Высылаю!

А не легче все это с помощью CSS организовать (свойства width и height), а плавность при помощи transition?

Денис Черников ответил:
Октябрь 29th, 2012 at 8:37

Если Вам легче, делайте!

Денис как мне на этот форум или может лично отправить скрипт ошибкой которую мне выдает FileZila.

Денис Черников ответил:
Октябрь 29th, 2012 at 12:53

Вопрос немного не по теме. а возможно ли заменить фон на котором написан текст на картинку? общий фон сайта я не имею ввиду.

Денис Черников ответил:
Январь 19th, 2013 at 18:44

Можно всё что угодно. Всё это делается в style.css.

Почему то не работает ни этот вариант с увеличением картинки, ни любой другой плагин. картинка все равно открывается в новом окне. Шаблон стоит mantra, может ли он влиять на это?

Денис Черников ответил:
Январь 21st, 2013 at 18:00

Скачайте себе другой шаблон и в нём попробуйте, если всё получится, то дело в шаблоне!

Владимир ответил:
Сентябрь 22nd, 2014 at 16:28

Дело в шаблоне. У меня есть файл «theloop.php» (живет вместе с single.php). В него и надо добавлять Java-скрипт:

Спс большое аффторру, помог.

Денис Черников ответил:
Февраль 26th, 2013 at 20:35

Пожалуйста! Рад был помочь.

Все работает, все ловко, но. есть великая неприятность, если картинка больше 600 пикселей в ширину — она уходит под сайдбар

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

прописывала — никаких изменений

Пример: http: //www.rasomaxa.hol.es/proverka.html

Денис Черников ответил:
Март 4th, 2013 at 20:14

Воспользуйтесь другим вариантом из другой моей статьи. А вообще, для начала нужно отцентрировать картинку, чтобы она из центра увеличивалась, а не из угла.

RasomaXa ответил:
Март 4th, 2013 at 21:07

Подскажите — какой именно?

Денис Черников ответил:
Март 4th, 2013 at 21:35

RasomaXa ответил:
Март 4th, 2013 at 23:57

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

И еще если картинку вставлять через ссылку — то у меня конфликтует с плагином — Auto Highslide, тоже ничего приятного(

Денис Черников ответил:
Март 5th, 2013 at 6:44

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

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

Денис Черников ответил:
Май 8th, 2014 at 23:18

Буду рад видеть Вас у себя в гостях!

Денис,очень интересное предложение. Но у меня к Вам вопрос немного другого содержания. Не знаете как сделать, чтобы видео смотреть на блоге во весь экран браузера? Как вставить ролик с YouTube я знаю, а вот нажав на него, чтоб увеличивался экран не могу найти ответа.

Денис Черников ответил:
Май 26th, 2014 at 18:13

Здесь нужно либо свой плеер использовать, либо довольствоваться Ютубом!

Денис, спасибо за Ваш сайт! В наше время довольно сложно найти ресурс с полезной и хорошо структурированной информацией. Очень импонирует Ваше искреннее и доброжелательное отношение к людям. Очень рада, что нашла Ваш блог, с удовольствие буду заходить в гости.

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

источник: dolinacoda.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