Setting transition time of slider navigation arrows

Question

I'm building a slider and I'm using CSS to display the navigation arrows when the slider is hovered over.

div.vslider {
    margin: 0 auto;
    box-sizing: content-box;
    position: relative;
}

div.vslider:hover div.vslider-nav {
    display: block;
}

div.vslider div.vslide {
    display: none;
    position: relative;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

div.vslider div.vslider-nav {
    display: none;
    position: absolute;
    top: calc(50% - 18px);
    z-index: 20;
    border-radius: 100%;
    transition: .6s;
}

div.vslider div.vslider-nav img {
    box-sizing: content-box;
    height: 24px;
    width: 24px;
    border: 1px solid #fff;
    border-radius: 100%;
    transition: .4s;
    cursor: pointer;
}

div.vslider div.vslider-nav img:hover {
    border: 1px solid #000;
    background: #000;
}

div.vslider div.vslider-nav#vslider-previous {
    left: 0;
    margin-left: 10px;
}

div.vslider div.vslider-nav#vslider-previous img {
    padding: 6px 7px 6px 6px;
}

div.vslider div.vslider-nav#vslider-next {
    right: 0;
    margin-right: 10px;
}

div.vslider div.vslider-nav#vslider-next img {
    padding: 6px 6px 6px 7px;
}

<div class='vslider' id='vslider' style="color: #fff; width: 1020px; height: 460px; background-color: #4d4d4d;">
        <div class='vslide' style="background-image: url(http://localhost/wordpress/wp-content/uploads/2019/01/FemaleDirector_1030299388.jpg); height: 100%; width: 100%;">
            <div class='vslider-textbox' style="background-color: #000; color: #fff;">
                <h2>Arts Funding</h2>
                <p>We provide grants for teenagers and young adults aged 16 to 34, who are producing film, music, television, theatre, literature and media that carries a positive social message or that is looking to inspire social change.</p>
                <p><a class='vslider-button'>Apply</a></p>
            </div>
        </div>    
    
        <div class='vslide' style="background-image: url(http://localhost/wordpress/wp-content/uploads/2019/01/VH_Slider_Award.jpg); height: 100%; width: 100%;">

        </div>
    
        <div class='vslider-nav' id='vslider-previous'><img src='http://localhost/wordpress/wp-content/plugins/vis-slider/imgs/left-arrow.png' /></div>
        <div class='vslider-nav' id='vslider-next'><img src='http://localhost/wordpress/wp-content/plugins/vis-slider/imgs/right-arrow.png' /></div>
    </div>

I want to add transition: .4s; (for example), at the moment they pop up straight away on hover, I'd rather it's smoother. I tried adding the transition to the slider and button divs but neither of these affect this particular issue. My question is basically, what should I target to make the navigation buttons transition more smoothly?

You might want to read some documentation about transitions https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions — SuperDJ, Jan 16 '19 at 20:13
Sorry dude, `display` is not an [animate-able property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) but you could either switch to use `opacity` and a `transition` or a custom `keyframe animation` to accomplish what you're after. — Chris W., Jan 16 '19 at 20:15

Setting transition time of slider navigation arrows

0 Answers0