Show toggle collapse on hover!

Show toggle collapse on hover! - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Show toggle collapse on hover! (/thread-144333.html)

Pages: 1 2 3

Show toggle collapse on hover! - Damian B. - 2013-08-20

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.

.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.

RE: Show toggle collapse on hover! - Bala - 2013-08-21

Nice one bugara. Will implement it on my forums too. Before this it was done via a script.

RE: Show toggle collapse on hover! - Damian B. - 2013-08-21

Thank you, Bala. Smile

RE: Show toggle collapse on hover! - Yadomi - 2013-08-26

Thanks!
Simple css with a cute effect, +Rep for you Big Grin

RE: Show toggle collapse on hover! - effone - 2013-08-26

The tutorial was not originally created for your board.
It is a very old CSS trick and is being used by designers from a long past for the premium themes ...

RE: Show toggle collapse on hover! - Harry K. - 2013-08-26

And a tutorial was shared a long time ago by me. http://community.mybb.com/thread-127353.html

RE: Show toggle collapse on hover! - Damian B. - 2013-08-27

(2013-08-26, 10:48 AM)Jaizu Wrote: Thanks!
Simple css with a cute effect, +Rep for you

Thank you!

(2013-08-26, 11:17 AM)effone Wrote: The tutorial was not originally created for your board.
It is a very old CSS trick and is being used by designers from a long past for the premium themes ...

Yes it was. It is my tutorial dispite of the fact that I'm not the first to use this code.

(2013-08-26, 04:16 PM)Xige Time Wrote: And a tutorial was shared a long time ago by me. http://community.mybb.com/thread-127353.html

I did a quick search but was not able to find anything.

RE: Show toggle collapse on hover! - gamemaster - 2013-08-28

how about toogle collapse in user cp ??

RE: Show toggle collapse on hover! - Damian B. - 2013-08-28

(2013-08-28, 06:20 AM)gamemaster Wrote: how about toogle collapse in user cp ??

I'll look into this. It's probably doable. Smile

Edit: I figured it out. Just add the following code in global.css

.tcat .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;
}

.tcat:hover .expcolimage img {
    opacity: 1;
}

RE: Show toggle collapse on hover! - gamemaster - 2013-08-28

(2013-08-28, 08:14 AM)bugara1 Wrote:
(2013-08-28, 06:20 AM)gamemaster Wrote: how about toogle collapse in user cp ??

I'll look into this. It's probably doable.
Edit: I figured it out. Just add the following code in global.css
.tcat .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;
}

.tcat:hover .expcolimage img {
    opacity: 1;
}	

ok thanks