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

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

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

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

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


Сейчас Вы узнаете, как сделать полномасштабной картинку при наведении курсора мыши на нее. Это делается очень просто при помощи 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. И конечно же, оставьте свой комментарий ниже 🙂

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

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



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

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

как сделать картинку ссылкой в html

Как сделать картинку ссылкой в html на любом сайте!

Узнай сейчас как сделать картинку ссылкой в html на своем сайте! Здравствуйте, уважаемые друзья и …

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

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

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

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

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