How to fix the option to show arrows only when the pointer hover over the slideshow. Just what you see on Facebook if looking at photo albums. Leaving the mouse off slideshow, means that arrow will be transparent or hide. Please check below to understand my issue. 

```js
function slide(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if (imagecount > total)
        imagecount = 1;
    if (imagecount < 1)
        imagecount = total;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}

window.setInterval(function slideA() {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if (imagecount > total)
        imagecount = 1;
    if (imagecount < 1)
        imagecount = total;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}, 5000);

function selectSlide(slideNumber){
    var Image = document.getElementById('img');
    imagecount = slideNumber;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}  
```

```css
.container-fluid {
    width: 100%;
    position: relative;
    height: auto;
}

#img {
    width: 100%;
    height: auto;
    position: relative;
}

#left-arrow .left {
    width: 5%;
    position: absolute;
    top: 40%;
    left: 20px;
    opacity:0.5;
}

#right-arrow .right {
    width: 5%;
    position: absolute;
    top: 40%;
    right: 20px;
    opacity:0.5;
}

#left-arrow .left:hover {
   cursor:pointer;
    cursor:hand;
    background: #4E9F69;
}

#right-arrow .right:hover {
    cursor:pointer;
    cursor:hand;
    background: #4E9F69;
}
```

```html
<div class="container-fluid">
    <img src="IMAGE/img1.jpg" alt="" id="img"/>
    <div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
    <div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
</div>
```