Добавить эффект зависания на картинку

Question

Привет всем!

Я создаю веб-сайт для себя, и я делаю эту больную страницу, но мне нужно знать, как заставить ее работать.

Из этого, когда это нормально: http://i.stack.imgur.com/QM0c0.png (Копировать и вставить в другом браузере, я не могу размещать прямые изображения)

И это было бы, как он выглядел бы при наведении на него, фон будет исчезать черный и изображение выскочит с большим размером: http://i.stack.imgur.com/dsvmu.png

Кто-нибудь знает, как это сделать?

С уважением!

Answer 1

Вам нужно будет сделать 2 дивы

'Div1 Малый Кнопка' и 'Div2 Big Button'

Затем вам нужно будет сделать их показ и скрытие с JQuery. И сделайте это так: если наведите курсор на эту кнопку, тогда покажите Div2 Big Button иначе скрыть.

Answer 2

Так вы делаете это с помощью чистого CSS. Лучший способ - использовать свойство :hover.

HTML:

<img src="http://i.stack.imgur.com/dsvmu.png"/> 

CSS:

img{ 
    height:200px; 
    width:200px; 
} 
img:hover{ 
    width:400px; /*OR transform: scale(1.5)*/ 
    box-shadow: 10px 10px 5px #888888; 
} 

Fiddle here. Наведите указатель мыши на изображение, чтобы увидеть эффект.

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

<div><img src="http://i.stack.imgur.com/dsvmu.png"/></div> 

CSS:

div { 
    pointer-events: none; 
} 

img { 
    pointer-events: auto; 
} 

div:hover { 
    background: rgba(0,0,0,0.3); 
} 
img{ 
    height:200px; 
    width:200px; 
} 
img:hover{ 
    width:400px; /*OR transform: scale(1.5)*/ 
    box-shadow: 10px 10px 5px #888888; 
} 

Upadated fiddle.

Answer 3

Я предлагаю использовать свойство transform css для изменения размера одного и того же изображения при наведении на него пользователя.

.banner img:hover { 

    transform: scale(1.25); 

}