Как реализовать появление кнопок «отправить» и т.д. при наведении на картинку

[PushustuiKotik]

Доброго времени суток! Я начинающий верстальщик. Верстаю по макетам. Возник вопрос как при наведении на картинку реализовать появление этих кнопок? (То есть как добавить сами иконки понятно), но как сделать их функциональными? Чтобы действительно можно было скопировать ссылку/поставить лайк. Нужен ли js? Можно ли реализовать это на плагине? Всем спасибо!

 

[BaNru]

Да, обязательно нужен JS.
Что подразумевается по плагином?

Готовая функция выглядит примерно так

function copyContent(text){
    const input = document.createElement('input');
    input.style.position = 'fixed';
    input.style.opacity = 0;
    input.value = text;
    document.body.appendChild(input);
    input.select();
    let result =  document.execCommand('Copy', false, null);
    document.body.removeChild(input);
    return result;
}

В эту функцию передаём необходимый текст и он копируется в буфер
Для вашей кнопочки он получится примерно вот так (самый простой вариант)

<span onclick="copyContent('ссылка')"></span>

copyContent - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Конечно можно добавить всякие уведомления типа "скопировано", но это на данном этапе усложнит функцию.

 

[PushustuiKotik]

Да, обязательно нужен JS.
Что подразумевается по плагином?

Готовая функция выглядит примерно так

function copyContent(text){
    const input = document.createElement('input');
    input.style.position = 'fixed';
    input.style.opacity = 0;
    input.value = text;
    document.body.appendChild(input);
    input.select();
    let result =  document.execCommand('Copy', false, null);
    document.body.removeChild(input);
    return result;
}

В эту функцию передаём необходимый текст и он копируется в буфер
Для вашей кнопочки он получится примерно вот так (самый простой вариант)

<span onclick="copyContent('ссылка')"></span>

copyContent - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Конечно можно добавить всякие уведомления типа "скопировано", но это на данном этапе усложнит функцию.

Спасибо огромное!