悬停在图像上时如何使背景变暗

Question

I have created a jQuery hover button. When you hover over the box, a jQuery button appears. However, it doesn't work. Can someone show me how to add a black background to the box when hovered over?

The objective is to;

1. When rolling over the box, it displays "chart it btn"

2. When rolling over the box, the box gets a black background.

jsFiddle

/*  CHART IT BTN ON POTS
===================================================================*/
$(".btn-trigger").hover(function () {
    $(this).find(".charthis-btn").show();
}, function () {
    $(this).find(".charthis-btn").hide();
})

I need the image that is shown to darken black with an opacity of 50% when rolled over.

Answer 1

The FIDDLE

JS :

$(".display-box").hover(function () {
$(this).find(".charthis-btn").show();
}, function () {
$(this).find(".charthis-btn").hide();
})

Answer 2

I'm not sure if it's what you want but try this:

EDIT

DEMO

$(".display-box").hover(function () {
    $(this).find(".charthis-btn").show();
    $(this).find(".hover-mask").fadeIn();
}, function () {
    $(this).find(".charthis-btn").hide();
    $(this).find(".hover-mask").fadeOut();
})

Answer 3

$(".display-box").hover(function () {
$(this).find(".charthis-btn").show();
}, function () {
$(this).find(".charthis-btn").hide();
})
$(".charthis-btn").on('mouseenter',function(){
$(".display-box img").css('opacity','0.5');
})
$(".charthis-btn").on('mouseout',function(){
$(".display-box img").css('opacity','');
})