how to show arrow only when hover slideshow html css javascript

Tags: , ,



I am trying to show arrows only when the mouse hover on the image.

Is there any way this can be done in CSS, html or Javascript.

Any help will be appreciated.

Thanks.

<html>
<style>
.prev {
    opacity: 0;
    position: absolute;
    top: 34%;
    left: 0;
}

.prev:hover {
    opacity: 1.0;
}

.next {
    opacity: 0;
    position: absolute;
    top: 34%;
    right: 0;
}

.next:hover {
    opacity: 1.0;
}

</style>

<body>
<div class="outerBox">

                <img src="SliderLeftArrow.svg" alt ="Prev" class = "prev" /> 

                <img src="SliderRightArrow.svg" alt ="Next" class = "next"/>

                <img src="image1.jpg" class="imageBox" id="image_slider" />
</div>
</body>
</html>

Answer

if you want the arrows to appear when hovering over the image – one way is to have the css as follows (I’ve dummied up image and arrows as pure text, but the principal remains the same)

.prev,
.next 
{
  opacity: 0;
  transition: opacity 800ms;
}

.outerBox:hover .prev,
.outerBox:hover .next
{
    opacity: 1.0;
}
<div class="outerBox">

                <span class="prev">&lt;&lt;&lt;</span>
                <span>I am an image</span>
                <span class="next">&gt;&gt;&gt;</span>
</div>

I also added a transition to the opacity, because I like transitions :p



Source: stackoverflow