На картинке ссылка не отображается поверх другого изображения

Question

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

Я создал скрипку ... https://jsfiddle.net/0nst2w0g/

Я считаю, что следующий код, что это неправильно. Слайд-шоу отлично работает, и я просто пытаюсь добавить это поверх всего, что было раньше.

*-Pin It button---*/ 
.pinItButton { 
    padding: 15px 15px; 
    cursor: pointer; 
} 
.pinItButton a { 
    text-decoration: none; 
    outline: none; 
} 
.pinItButton a:hover { 
    -webkit-transition: color 300ms ease-in 200ms; 
    /* property duration timing-function delay */ 
    -moz-transition: color 300ms ease-in 200ms; 
    -o-transition: color 300ms ease-in 200ms; 
    transition: color 300ms ease-in 200ms; 
} 
.pinItButton:hover { 
    -webkit-transition: background 300ms ease-in 200ms; 
    /* property duration timing-function delay */ 
    -moz-transition: background 300ms ease-in 200ms; 
    -o-transition: background 300ms ease-in 200ms; 
    transition: background 300ms ease-in 200ms; 
} 
.slideshow .pinItButton { 
    display: none; 
} 
.slideshow:hover .pinItbutton { 
    display: block; 
    top: 0; 
    float: right; 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Я попытался положить ...

<div class="pinItButton"><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a> 
      </div> 

под слайд-шоу DIV, под большим классом дел. Ничто не делает это, где я хочу.

Любые предложения?

Answer 1

Таким образом, есть пара вещей, которые неправильно. Прежде всего:

.slideshow:hover .pinItbutton { 
    display: block; 
    top: 0; 
    float: right; 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Это говорит о том, что pinItbutton, а не pinItButton. Кроме того, вы нацеливаете свою кнопку булавки с некоторым CSS для других изображений, которые делают его массивным и странным.

Вот некоторые исправления, но это определенно нуждается в некоторой работе. https://jsfiddle.net/0nst2w0g/16/

EDIT: Вот рабочий пример с плавающим ползунком. Не уверен, что это работает для вас. https://jsfiddle.net/0nst2w0g/20/