Makestation
[Tutorial] Show toggle collapse on hover only! - Printable Version

+- Makestation (https://makestation.net)
+-- Forum: Technical Arts (https://makestation.net/forumdisplay.php?fid=45)
+--- Forum: Web Design & Internet (https://makestation.net/forumdisplay.php?fid=62)
+---- Forum: Resources & Tutorials (https://makestation.net/forumdisplay.php?fid=56)
+---- Thread: [Tutorial] Show toggle collapse on hover only! (/showthread.php?tid=405)



Show toggle collapse on hover only! - Damian B. - August 22nd, 2013

What is this?
In this tutorial I'll show you how to add this elegant effect to toggle collapse. Basically it makes the toggle collapse button only appear when we hover our mouse over the category. Preview can be found, here.
Tutorial:
Go to: Admin CP/ Templates & Styles/ Themes/ YOUR THEME/ global.css
and Advanced Mode and just paste the following code in the end.
Code:
.thead .expcolimage img {
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -ms-transition: opacity .25s ease-in-out;
        -o-transition: opacity .25s ease-in-out;
        transition: opacity .25s ease-in-out;
}

.thead:hover .expcolimage img {
    opacity: 1;
}
Then just save!
If you have any questions or concerns please reply here.
This tutorial was originally created for PromotionZone.