Увеличение картинки при наведении

@Rva4 · Регистрация: 26.01.2016

Author24 — интернет-сервис помощи студентам

Нужно увеличивать картинку, когда не нее наведен курсор

@mrtoxas · 30.06.2016, 21:29

CSS
1
2
3
4
5
6
img{
  width:300px;  
}
img:hover{  
  width:340px;       
}

@Fedor92 · 30.06.2016, 21:34

Rva4, вот Вам код:

HTML5
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>zoom</title>
 </head> 
 <body>
    <img src="https://h-a.d-cd.net/4224b88s-960.jpg" class="block">
 </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 .block{
    display:inline-block;
    margin-left:10px;
    margin-top:10px;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
    transform: scale(1,1);
    transition-timing-function: ease-out;
    transition-duration: 550ms;
    transform: scale(1,1);
    transition-timing-function: ease-out;
    transition-duration: 550ms;
}
.block:hover {
    transform: scale(1.2,1.2);
    transition-timing-function: ease-out;
    transition-duration: 550ms;
    transform: scale(1.2,1.2);
    transition-timing-function: ease-out;
    transition-duration: 550ms;
    -webkit-transform: scale(1.2,1.2);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -moz-transform: scale(1.2,1.2);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
}

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

Новые блоги и статьи Все статьи Все блоги /
Мульти-тенантные БД с PostgreSQL Row Security Codd 23.04.2025 Современные облачные сервисы и бизнес-приложения всё чаще обслуживают множество клиентов в рамках единой программной инфраструктуры. Эта архитектурная модель, известная как мульти-тенантность, стала. . .	Реализация конвейеров машинного обучения с Python и Scikit-learn AI_Generated 23.04.2025 Мир данных вокруг нас растёт с каждым днём, и умение эффективно обрабатывать информацию стало необходимым навыком. Специалисты по машинному обучению ежедневно сталкиваются с задачами предобработки. . .	Контроллеры Kubernetes Ingress: Сравнительный анализ Mr. Docker 23.04.2025 В Kubernetes управление входящим трафиком представляет собой одну из ключевых задач при построении масштабируемых и отказоустойчивых приложений. Ingress — это API-объект, который служит вратами. . .	Оптимизация кода Python с Cython и Numba py-thonny 23.04.2025 Python прочно обосновался в топе языков программирования благодаря своей простоте и гибкости. Разработчики любят его за читабельность кода и богатую экосистему библиотек. Но у этой медали есть и. . .	Микросервис на Python с FastAPI и Docker ArchitectMsa 23.04.2025 В эпоху облачных вычислений и растущей сложности программных продуктов классическая монолитная архитектура всё чаще уступает место новым подходам. Микросервисная архитектура становится фаворитом. . .
Создаем веб-приложение на Vue.js и Laravel Reangularity 23.04.2025 Выбор правильного технологического стека определяет успех веб-проекта. Laravel и Vue. js формируют отличную комбинацию для создания современных приложений. Laravel — это PHP-фреймворк с элегантным. . .	Максимальная производительность C#: Span<T> и Memory<T> stackOverflow 22.04.2025 Мир высоконагруженных приложений безжалостен к неэффективному коду. Каждая миллисекунда на счету, каждый выделенный байт памяти может стать причиной падения производительности. Разработчики на C#. . .	JWT аутентификация в Java Javaican 21.04.2025 JWT (JSON Web Token) представляет собой открытый стандарт (RFC 7519), который определяет компактный и самодостаточный способ передачи информации между сторонами в виде JSON-объекта. Эта информация. . .	Спринты Agile: Планирование, выполнение, ревью и ретроспектива EggHead 21.04.2025 Спринты — сердцевина Agile-методологии, позволяющая командам создавать работающий продукт итерационно, с постоянной проверкой гипотез и адаптацией к изменениям. В основе концепции спринтов лежит. . .	Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров Programma_Boinc 21.04.2025 Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров. 3 марта 2025 года, в результате обобщенного поиска простых чисел Ферма в PrimeGrid был найден. . .

@Rva4 3 / 3 / 2 Регистрация: 26.01.2016 Сообщений: 229

	Увеличение картинки при наведении 30.06.2016, 19:41. Показов 5420. Ответов 2 Метки нет (Все метки) Нужно увеличивать картинку, когда не нее наведен курсор 0

Опции темы

Увеличение картинки при наведении

Решение