Домой / Сайтостроение / Увеличение при наведении курсора мыши

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

увеличение при наведении
увеличение при наведении

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

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


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

И так, давайте же узнаем, как делается увеличение при наведении при помощи CSS ...

Делаем сами увеличение при наведении при помощи CSS

Если мы с вами хотим сделать увеличение при наведении картинки на нее курсора мыши, то нам потребуется проделать следующее ...

Копируем данный код и вставляем его в вашу HTML страницу между тегами <head></head>:

<style
 type="text/css">

/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo">
Иначе увеличительне будет работать в IE6 */

.ienlarger {
  float: left;
  clear: none; /* Можно установить left или right по необходимости */
  padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
  padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}

.ienlarger a {
  display:block;
  text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}

.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
 	position:relative;
}

.ienlarger span img {
  border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
  margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}

.ienlarger a span {  /* Для большого изображения и названия */
  position: absolute;
  display:none;
  color: #FFCC00; /* Текст названия */
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px; /* Размер шрифта названия */
  background-color: #000000;
  font-weight: bold;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 13px;
  padding-left: 10px;
}

.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}

.ienlarger a:hover span {
  display:block;
  top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
  left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */
  z-index: 100;

/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}

.resize_thumb {
  width: 150px; /* Вводим нужный размер миниатюры здесь */
  height : auto;
}

/* Код увеличителя закончен */
</style>

Теперь после открывающегося тега <body> вставляем следующий код:

  <div class="ienlarger"><a 
href="https://pribylwm.ru"><img 
src="https://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="https://img406.imageshack.us/img406/4920/63734582.jpg" 
alt="large" /><br />
    Здесь Вы можете написать свой текст.</span></a></div>

  <div class="ienlarger"><a 
href="https://twitter.com/pribylwm"><img 
src="https://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="https://img257.imageshack.us/img257/1926/92628379.jpg" 
alt="large" /><br />
    Здесь Вы можете написать свой текст.</span></a></div>

  <div class="ienlarger"><a 
href="https://vk.com/wpzarabotok"><img 
src="https://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="https://img442.imageshack.us/img442/6325/87011940.jpg" 
alt="large" /><br />
    Здесь Вы можете написать свой текст.</span></a></div>

  <div class="ienlarger"><a href="https://www.facebook.com/groups/1065415996857887/"><img 
src="https://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="https://img691.imageshack.us/img691/7360/89815502.jpg" 
alt="large" /><br />
    Здесь Вы можете написать свой текст.</span></a></div>
 <br style="clear:left" />

Тут Вы можете посмотреть пример, что будет если Вы все правильно сделали и увеличение при наведении при помощи CSS должно работать как здесь: увеличение при наведении курсора на картинку

Здесь Вы можете скачать файлы для использования у себя, чтобы сделать увеличение при наведении: скачать увеличение при наведении

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

  • http://www.amfus.ru Евгений

    Спасибо. в хозяйстве пригодится 🙂

    • https://pribylwm.ru/ Валерий Бородин

      Пожалуйста Евгений! Вам спасибо за посещения!!!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу