Arrow on mouse over

Permalink Browser Info Environment
Hello,
Thank you for your great slider.
I am looking for a solution to have a mouse over action with arrow.
One image png with 20% transparent in normal state and the same with 100% on mouse over.

I am not a developper but, i can apply css, images and code if you have the solution to do that ?

Thank you for your help.
Jeff

Type: Discussion
Status: New
Elstud
View Replies:
jheanly replied on at Permalink Reply
jheanly
Hi Jeff

The following css should help you...

div.orbit-wrapper div.slider-nav span.right,
div.orbit-wrapper div.slider-nav span.left {
    opacity: 0.2;
}
div.orbit-wrapper div.slider-nav span.right:hover,
div.orbit-wrapper div.slider-nav span.left:hover {
    opacity: 1;
}


You should be able to add this css to the css file of the theme your site is using. Let me know if you need any help.

Also, have you considered what this change will do to people using mobile or tablet devices to view your website? Devices with touch screens have no hover ability so the navigation arrows will always appear faded. We can get around this by wrapping the css above in a media query that in effect would only apply the faded nav style if the user is on a large screen device like a desktop. The media query version of the css would look like this...

@media (min-width: 980px)
{
    div.orbit-wrapper div.slider-nav span.right,
    div.orbit-wrapper div.slider-nav span.left {
        opacity: 0.2;
    }
    div.orbit-wrapper div.slider-nav span.right:hover,
    div.orbit-wrapper div.slider-nav span.left:hover {
        opacity: 1;
    }    
}


Regards

James
Elstud replied on at Permalink Reply
Elstud
James, it's absolutly perfect !! and feel more interactive like that.
Thank you very much.

I write your CSS and this line too :

div.orbit-wrapper div.timer span.pause{
    opacity: 0.5;
}
div.orbit-wrapper div.timer span.mask{
    opacity: 0.5;
}
div.orbit-wrapper div.timer span.mask move{
    opacity: 0.2;
}
jheanly replied on at Permalink Reply
jheanly
Well done. Glad I could help out and that you like the slider.

If you get a chance, could you write up a review for the slider? That would be greatly appreciated.

Regards

James

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.