• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » CSS эффекты при наведении изображения (Подборка потрясающих эффектов для изображений HTML, CSS)
CSS эффекты при наведении изображения
Kosten
Дата: Воскресенье, 2019-04-14, 00:26 | Сообщение 1
Администраторы
Сообщений:20711
Награды: 56


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

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

Создать эффект изображения при наведении курсора

Следующий код показывает, как показать эффект наведения на Box Shadow.

HTML

Код
<div class="atukigsan-dexopksan">
  Наведите мышь сюда
    </div>

CSS

Код
    .atukigsan-dexopksan
    {
  width: 173px;
  border: 1px solid #256ebc;
  padding: 10px;
    text-align: center;
    cursor:pointer;
    border-radius: 50px;
    }
    .atukigsan-dexopksan:hover
    {
  -moz-box-shadow: 0 0 10px #a79f9f;
  -webkit-box-shadow: 0 0 10px #a79f9f;
  box-shadow: 0 0 10px #a79f9f;
    }

Демонстрация
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-14, 00:39 | Сообщение 2
Администраторы
Сообщений:20711
Награды: 56


Следующий код CSS показывает, как представить эффекты наведения изображения.

Эффекты наведения изображения Image Rollovers

Наведите указатель мыши на изображение.

HTML

Код
<div class="tesaxaqe-ubdecolid">
    </div>

CSS

Код
    .tesaxaqe-ubdecolid {
  width: 512px;
  height: 301px;
  background: url(http://zornet.ru/_fr/79/5122556.jpg) no-repeat;
    cursor:pointer;
    }
    .tesaxaqe-ubdecolid:hover{
  -moz-box-shadow: 0 0 10px #504949;
  -webkit-box-shadow: 0 0 10px #504949;
  box-shadow: 0 0 10px #504949;
    }

Демонстрация
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-14, 00:45 | Сообщение 3
Администраторы
Сообщений:20711
Награды: 56


Непрозрачность противоположна прозрачности, не пропуская свет. Вы можете создавать прозрачные изображения в CSS с помощью свойства opacity.

CSS-эффект затухания изображения или CSS непрозрачность изображения и прозрачность.



CSS

Код
img {
     opacity: 0.3;
}

В CSS нет такого свойства, как прозрачность. Но вы можете добиться прозрачности, вставив псевдоэлемент с регулярной непрозрачностью, точный размер элемента позади него.
Прикрепления: 5508430.png(68.3 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-14, 21:08 | Сообщение 4
Администраторы
Сообщений:20711
Награды: 56


Создание прозрачных и непрозрачных изображений: эффект наведения мыши

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

HTML

Код
<div class="dekasumo-sepagked">
    </div>

CSS

Код
.dekasumo-sepagked{
    width:174px;
    height:174px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: url(http://zornet.ru/_fr/79/0293453.jpg) no-repeat;
  cursor:pointer;
}
.dekasumo-sepagked:hover
{
    opacity: 0.5;
    filter: alpha(opacity=30);
}


Демонстрация
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-14, 21:22 | Сообщение 5
Администраторы
Сообщений:20711
Награды: 56


Наложение изображений друг на друга, это отличный способ придать образу новый облик. Здесь код CSS, который отображает текст на изображении при наведении курсора мыши.

Наложение текста на изображение при наведении



HTML

Код
<div class="detulopig-bsacun">
  <div class="lasopedum">
Новый драйвер Nvidia WHQL 425.31 обеспечивает трассировку лучей на картах GTX - и некоторые из высокопроизводительных графических процессоров могут даже справиться с этим в определенных.
  </div>
</div>    

CSS

Код
.detulopig-bsacun{
    width:398px;
    height:223px;
    background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/UE4-Raytracing-Feature-640x353.jpg) no-repeat;
  cursor:pointer;
}
.lasopedum{
    width:353px;
    height:223px;
    background:#ececec;
    opacity:0;
}
.detulopig-bsacun:hover .lasopedum
{
    opacity:0.7;
    text-align:justify;
    color:#212121;
    font-size:20px;
    font-weight:700;
    font-family:"Times New Roman", Times, serif;
    padding:28px;
}

Демонстрация
Прикрепления: 1286342.jpg(56.4 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-14, 21:33 | Сообщение 6
Администраторы
Сообщений:20711
Награды: 56


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

Следующий код CSS показывает, как изменить изображение при наведении мыши. При наведении курсора мыши одно изображение, связанное с div, помещается поверх другого изображения.

Изменение картинки или изображение при наведении курсора

HTML

Код
<a href="http://zornet.ru/forum/123-8017-1" class="vetudsan-umaslopad" title="ZorNet - портал для вебмастера"></a>

CSS

Код
    .vetudsan-umaslopad {
  width: 185px;
  height:185px;
  display:block;
  background-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/duck.png');
    }
    .vetudsan-umaslopad:hover {
  background-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/peng.png');
    }

Демонстрация
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-14, 21:42 | Сообщение 7
Администраторы
Сообщений:20711
Награды: 56


Вы можете изменить цвет фона Div при наведении курсора, где следующий код CSS показывает, как изменить цвет фона div при наведении курсора.

CSS Div Hover

HTML

Код
<div class="kasnedin-poklopag">
    </div>

CSS

Код
    .kasnedin-poklopag{
  width:317px;
  height:227px;
  border:4px solid #383d54;
    }
    .kasnedin-poklopag:hover
    {
  background:#1e34a7;
    width:317px;
  height:227px;
    cursor:pointer;
    }

Демонстрация
Страна: (RU)
Kosten
Дата: Вторник, 2019-04-16, 20:36 | Сообщение 8
Администраторы
Сообщений:20711
Награды: 56


Чистый JavaScript и CSS-эффекты для галерей изображений


See the Pen
CSS effects
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » CSS эффекты при наведении изображения (Подборка потрясающих эффектов для изображений HTML, CSS)
  • Страница 1 из 1
  • 1
Поиск: