In this CSS tips post, I'm going to go over how you can have a similar hover effect on your own sites.
The example
elegant themes nimble reviewIn this example, I'll be using a text widget in the Twenty Eleven theme , the new default as of WordPress 3.2.
Basically, once you hover over the div containing the widget, russian virtual mobile number a “hidden” div will appear which will be our bio dropdown box.
Note that in the image on the left, the grey bio box will not appear unless you hover over the div containing the “Bio Hover” header.
The selector
It's not that important to have a unique CSS selector to style the div you want to put your bio dropdown box in. Basically this is because if you don't have the accompanying markup in that div, nothing would be displayed anyway in the event of a hover state.
Although in the case of Twenty Eleven, you could get away with just styling the class “aside”, chances are you just want a bio dropdown box in one of your divs anyway, so let’s be more specific.
Luckily, WordPress gives you a ton of unique CSS selectors that you can use. In this example, it spits out #test-3the one we're going to use from now on.
Note: This may vary depending on your WordPress installation. Use something like Chrome Developer Tools to easily find the selector.
HTML code
In this example, the HTML code can be placed directly into the WordPress text widget. Here is what you would put
<div class="bio-dropdown">
<img class="photo" alt="¡Leland!" src="
<p>Hola. Soy Leland Fiegel y soy el creador y fundador de Theme Lab. Me encanta escribir código, especialmente HTML, CSS y para WordPress.</p> <p>
</div>
Unless you want to steal my identity, you'll probably want to replace the photo with a photo of yourself. You can also optionally delete it.
Since we are using a WordPress widget, the external markup is already generated for us. Here is what it is in total.
<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="
</div>
</aside>
If you're doing this on a raw HTML site, you'll need some sort of wrapper (like this is the side) for the bio dropdown with something else in it, otherwise there's nothing to hover over to dropdown.
Real life example: My dropdown bio div is inside a tag liin my navigation menu.
First two lines of CSS
The first two lines really set up the rest of it, so I put this in its own section.
#text-3 { position: relative; }
.bio-dropdown { display: none; }