Plugin or Code?

[Riley]

Hi! I hope I'm not posting this in the wrong place, but I never seem to know where to post things anymore.

I've been looking through the plugin library trying to find a plugin that does this:
>>site<< - I'm referring the the mini profile. The roll over image thing. 
I'm not sure whether this is a plug in or simply some sort of code thing that can be added into the layout templates for different themes.
If anyone knows where I can find how to make this roll-over effect please link me to it!

Thanks guys!


edit: I've tried downloading the original theme from the theme library and the mini profile thing isn't on there, so it's clearly something different the site makers on the link above added themselves. 

[Jordan]

It's a CSS3 property called transition-duration used in conjunction with the opacity property.

You can stick this CSS in your Global Headers to see a basic example.

<style type="text/css">

div.mini-profile { opacity: 0; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }
div.mini-profile:hover { opacity: 1; }

</style>

But that will completely hide the mini-profile, so you will most likely need to go into your Mini-Profile Layout Templates under Structure > Layout Templates > Mini-Profile, and add an inner div (add the red) to the mini-profile so the border and any background images you add stay visible.

<div class="$[miniprofile_class]">
   <div class="mini-hover">
      $[user]<br />
      ...
   </div>
</div>

And then add the red to CSS I gave above.

<style type="text/css">

div.mini-profile > div.mini-hover { opacity: 0; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }
div.mini-profile:hover > div.mini-hover { opacity: 1; }

</style>

Let me know if you have any questions.

[Riley]

Oh wow! That's awesome and really simple! I was expecting it to be something massively complex.
Can I ask - you mentioned 'so the border and any background images you add stay visible'... how do I go about adding a background image?
Thanks for the help This code looks great.

[Jordan]

Are you wanting the same background for everyone, or a different background for each user?

Edit: I assumed you'd want different backgrounds for different users, so I made a plugin which allows you to easily set a color and background image for each user. Let me know if it works for you and if you find any problems with it. I've barely tested it.

Mini-Profile Backgrounds