+7 (911) 913-40---
menu
person

17:46
Увеличение размеров картинки при наведении курсором

Задача: увеличение размеров картинки при наведении на неё курсором, если
курсор выходит за пределы элемента, то размеры картинка становятся
первоначальными.

Уточнение: 90 первоначальный размер картинки, а 150 - размер, до которого увеличивается картинка.

Если провести курсором по картинке, то картинка всё равно увеличится до размеров 150 пикселей.

Код
<img src="http://www.novickiy.ru/_ph/4/2/433496286.jpg">
  <script src="//code.jquery.com/jquery-latest.js"></script>
  <script>
  $('img').width(90).hover(function(){
  $(this).stop().animate({width: 150});
  },
  function(){
  $(this).stop().animate({width: 90});
  });
  </script>
  

 


 

Код
<style>  
  img{  
  width: 90px;  
  -webkit-transition: width 0.5s;  
  -moz-transition: width 0.5s;  
  -o-transition: width 0.5s;  
  transition: width 0.5s;  
  }  
  img:hover{  
  width: 150px;  
  }  
  </style>  
  <img src="http://www.novickiy.ru/_ph/4/2/433496286.jpg">



Просмотров: 3629 | Добавил: Go
2 голоса

Всего комментариев: 0
avatar