If you have a specific requirement in mind, it might be possible to achieve it without the use of javascript. One approach is to utilize the css pseudo-class :hover along with absolute positioning. In this example, I'm showcasing a technique where the background is darkened using a layer above it with a black background that has an opacity of .5 achieved through background: rgba(0,0,0,.5).
.css-hover-effect {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-hover-effect:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-hover-effect">
<div class="bg"></div>
<div class="overlay">
<div class="fa-links">
<a href="#">A</a>
<a href="#">B</a>
</div>
<p>You're hovering...</p>
</div>
</div>