Закрыть ... [X]

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

Автор: ARKSEO

подсветка картинки на cssподсветка картинки

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

Так вот, часто у меня в начале, когда я еще не плотно работал со стилями и не использовал DIV верстку (предпочитал таблицы) возникало, как бы сказать, не понимание, как ссылки, на какую-то внутреннюю страницу или другой сайт, сделать в виде кнопки.
Я для этого находил какую-то кнопку на CSS через Гугл и добавлял ее к себе на сайт. Сейчас, когда я более подробно начал изучать CSS и верстку DIV-ами, пришло понимание того, что на самом деле все очень просто.
Сейчас я хочу показать несколько способов подсветить картинку или превратить простую ссылку в кнопку.

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

кнопка бабло

Добавить ее на страницу очень просто. Если закинуть ее в корень сайта, то код такой:

<img src="/knopka_bablo.png" alt="кнопка бабло" title="кнопка бабло" width="100" height="100"/>

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

<a href="#ссылка"><img title="кнопка бабло" src="/knopka_bablo.png" alt="кнопка бабло" width="100" height="100" /></a>

 

Результат простой картинки с ссылкой без подсветки:
 кнопка бабло

Но вам хочется, чтобы при наведении увеличилась кнопка подсвечивалась. Это можно сделать несколькими способами. Сейчас их рассмотрим.

Первое что вам нужно – это сделать еще одну картинку другого цвета или более светлую (темную) и подставлять ее при наведении курсора.

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

Читайте также:   Как защитить контент от копирования

Например, картинку, которая выше я открыл через Microsoft Office Picture Manager, сделал ее почти черно-белой и сохранил под именем knopka_bablo-1.png. Получилось две картинки (заливаем их на хостинг; в данном случае залито в корень сайта):
кнопка баблокнопка бабло

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

<a href="#ссылка"><img title="кнопка бабло" onmouseover="this.src='/knopka_bablo.png ';" onmouseout="this.src='/knopka_bablo-1.png ';" src="/knopka_bablo-1.png " alt="кнопка бабло" /></a>

 

А вот результат (наведите курсор):
кнопка бабло

Можно сделать и по-другому. В таблицу стилей CSS (обычно файл style.css вашего шаблона) добавить код, при этом имя идентификатора можно придумать любое, в маем случае img-bablo:

#img-bablo a {background-image: url('/knopka_bablo-1.png'); width:100px; height:100px;display: block;} / картинка сразу / #img-bablo a:hover {background-image: url('/knopka_bablo.png');} / картинка при наведении курсора /

А нашу ссылку обернуть в тег div с нужным идентификатором (попросту, код ниже вставить в то место, где нужно показать картинку):

<div id="img-bablo"><a href="https://seodnevnik.ru/zarabatyvayu-zdes"></a></div>

 

Результат получаем тот же (наведите курсор)


Источник: https://seodnevnik.ru/sozdanie-sajtov/podsvetka-kartinki-ili-sozdanie-knopki-na-css.html


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


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

Похожие новости


Ручка на триммер своими руками
Как сделать фаталити в mortal
Как вырастить кувшинку из семян в домашних условиях
Как сделать искусственный водопада
Привороты на деньги читать в домашних условиях




ШОКИРУЮЩИЕ НОВОСТИ