SEO продвижение сайтов

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

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

Нужно подготовить три файла ккартинку, HTML-файл и CSS-файл.

Создаем HTML-файл index.html с кодом:

<!DOCTYPE html><html dir="ltr" lang="ru-ru">
<head>
<title>Увеличение рисунка</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head><body>

<div class="img"><img src="/foto-1.png"></div>

</body></html>

Создаем CSS-файл style.css с кодом:

* {margin:0; padding:0;}

.img {border:1px solid #000; overflow:hidden; width:700px; margin:0 auto;}
.img img {
width:100%;
-webkit-transition:all 3s linear 0s;
-o-transition:all 3s linear 0s;
transition:all 3s linear 0s; display:block;
}

.img:hover img {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2)
}

Скачать changing-picture-html.rar архив примера можно здесь.

Автор: Алехин Геннадий (11.04.2018)

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


Защитный код
Обновить

Ошибки в тексте выделить и Ctrl+Enter


Расскажи о нас друзьям

Web-технологии

Шаблоны проектирования в PHP - паттерны

Шаблон проектирования или паттерн (англ. design pattern) - оптимальный и оригинальный подход в решении типичных, частовстречающихся задач. Эти подходы, приёмы имеют свои названия и используются почти во всех объектно-ориентированных языках программирования.

Паттерны можно классифицировать по назначению (цель, результат) и по тому, к чему обычно применяется к объектам или к классам.

  • Поведенческие (behavioral)

    • цепочка обязанностей (Chain of Responsibility);
    • команда (Command);
    • итератор (Iterator);
    • посредник (Mediator);
    • хранитель (Memento);
    • наблюдатель (Observer);
    • посетитель (Visitor);
    • стратегия (Strategy);
    • состояние (State);
    • шаблонный метод (Template Method).
  • Порождающие (creational)

    • простая фабрика (Simple Factory);
    • фабричный метод (Factory Method);
    • абстрактная фабрика (Abstract Factory);
    • строитель (Builder);
    • прототип (Prototype);
    • одиночка (Singleton).
  • Структурные (structural)

    • адаптер (Adapter);
    • мост (Bridge);
    • компоновщик (Composite);
    • декоратор (Decorator);
    • фасад (Facade);
    • приспособленец (Flyweight);
    • заместитель (Proxy).
Подробнее...

PHP Singleton - Синглтон, пример паттерна

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

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

Паттерн Singleton (одиночка) - цель создать только ОДНУ (!!!) реализацию класса с целью экономии ресурса и не допустить коллизий повторных подключений. Нужно создать единственную реализацию класса и его методов и при попытках создать ещё реализации этого класса всегда возвращать результат первой ранее созданной реализации класса.

Пример php-кода:

Подробнее...

Командная строка для Web программистов

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

Базовый терминал для работы с командной строкой есть в каждой операционной системе, а также можно скачать и сторонние программы, например: GitBash.

Скачать GitBash можно тут.

Далее запускаем от имени администратора или Служебные программы Windows -> Командная строка (cmd) или GitBash или др.

NB!: Для Windows Win + R и ввести команду cmd.exe

Основные команды:

Подробнее...
Интересные статьи

Стишки-депрессяшки

Стишки-депрессяшки

У меня нет попы

у меня нет тить

я должна работать

чтобы как то жить

©

В камасутре много

интересных поз

жаль у нас с женою

остеохондроз

©

Надо же приснится

всякая херня

прямо на работе

среди бела дня

Подробнее...

Почему или резонные вопросы

Почему или резонные вопросы

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

  1. Почему современные технологии одновременно позволяют производить банки для пива, которые не разлагаются на свалке за 100 лет, и кузова автомобилей, которые гниют за 3-4 года?
  2. Почему лимонный сок сделан из концентрата, а средство для мытья посуды – из настоящего лимона?
  3. Почему белая нитка, которой соединены новые носки, всегда оказывается прочнее, чем нитки, из которых сделаны сами носки?
Подробнее...

Детские загадки для взрослых

murzilka m

*Загадки, которые были опубликованы в журнале "Мурзилка" 30 лет назад!!! Сегодня они не для детей точно: ))*

1. Чтобы спереди погладить, нужно сзади полизать. (Почтовая марка)

2. Кругом волоса, посредине колбаса. (Кукуруза)

3. Сверху черно внутри красно, как засунешь так прекрасно. (Галоши)

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить