#hover posts

Theme #005: Time of the Season Preview | Download

ABOUT: This theme is one of my favorites so far. It is a grid theme. You have the choice of 3 width options. They can be 500px or 400px (which makes the theme a two column view) and you can choice 300px (which makes the theme three columns). You also have a search bar, 10 extra links (the first four are in the drop down in the navigation the other size are in the footer), and you have the options to have light or dark tumblr controls and to hide/show post captions. This theme also contains hover posts. 

FEATURES:

Post widths of 500px, 400px, 300px

Hover Posts

Unnested captions.

Sidebar image is 150px by autoed height

Ten extra links

Color photo lightboxs and hover posts

Minamal soundcloud and spotify players

Post type icons on the post page

Custom tooltips

Custom tumblr controls (via cyantists)

NOTES: For the custom color on the photoset/photo lightbox. The text reads Lightbox RGBO. It stands for Red, Green, Blue, Opacity. To change it just fill in the color’s numbers and opacity level. (Example 150, 137, 136, 0.8)

hi there nonny,it sounds like it’s a simple opacity hover??  (maybe??) – what they’ve probably done is set the opacity of their posts or the whole container lower, and then added in a post or container hover to raise the opacity back up… 

lets take a quick look at how it works–!!  you can apply this to pretty much any css block, your posts, your container, etc.  just make sure that the hover block you make corresponds to the block you want to apply the effect to…

so here, i’ve just added;

opacity:0.2;

to my header css…

#header {    opacity:0.2;    width:410px;    height:200px;    border:1px solid {color:border};}

and now my header looks ‘faded’ - you can make this effect particularly impressive if you have a nice graphic behind the faded element!  i would always advise to leave a little bit of opacity (rather than setting at 0), so that people can see that there’s ‘something’ there to hover over!

now i add in the ‘hover’ section…  i just give it the same name as my header section, add the hover command, and give it an opacity of 1 (1 is fully visible, 0 is completely hidden, and anything in-between are obviously different degrees of opacity!) - so this is my extra bit of css…

#header:hover {    opacity:1;    transition: opacity .7s ease-in-out;    -moz-transition: opacity .7s ease-in-out;    -webkit-transition: opacity .7s ease-in-out;}

i’ve also added a transition, so the fade in-out is smooth, rather than a ‘snap’ of the opacity effect!

this is what we have now - 

you can apply this to just your posts, to just a sidebar, to just the text… pretty much anything you like, nonny - you just need to make sure to match up your lowered opacity element, with the hover element… and that’s about it - how to apply a hover effect with opacity.  

dont you hover over that sentence