Пытаясь добавить «информационную кнопку» к изображениям на моей странице, которые появляются только при наведении курсора

Question

Картинка, которую я пытаюсь рисовать, такова: У меня есть изображение картины в центре моей страницы. Когда я нависаю над картиной, я хочу, чтобы значок информации (маленький «i») отображался в правом верхнем углу моего изображения. Я поместил значок «i» поверх другого изображения. Я знаю, что это неверно, но я не знаю, как привязать его к размерам изображения.

Кроме того, когда я наведите курсор мыши на «я», я хочу, чтобы это всплывающее окно небольшое окно с 3-х строк текста (по названию картины, размер, и год он был сделан.)

Я пробовал несколько разных методов, но ни один из них, похоже, не работает, поэтому я отменяю код до этого, прежде чем попробовать что-то другое.

<div style="position: relative; left: 0; top: 0;"> 
<img src="Placeholder.jpg" style="position: relative; top 0; left: 0;"/> 
<img src="info.gif" style="position: absolute; top: 30px; right:320px"/> 
</div> 

Answer 1

Вы пытаетесь сделать это исключительно с помощью CSS? Если info.gif был дочерним элементом placeholder.jpg, это сработало бы, и вы могли бы сделать это, заменив img на div или span, используя селектор CSS background-image: url(), а затем используя:

img[src=Placeholder.jpg]:hover { 
    img[src=info.gif] { 
     display: block; 
    } 
} 

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

.hover() // functionality 

Я приложил JSFiddle здесь и прикрепил jQuery hover event к дайте вам немного больше фона.

Я использовал примерный код с изображением, а информационное изображение, показывающее, что на картинке отображается значок, а затем скрывает значок, когда пользователь покидает изображение.

Надеюсь, это поможет!