Push button with css3 and jQuery

CSS3 Only

As you hover over the button a text link is revealed with a push. This is all good and well, however, as far as I can tell there is no way to achieve this effect without triggering a hover over the whole button. Currently there is no option to select a parent element using CSS so the text being pushed out of the box has to be contained within the hovered element. This means the button will push across when the mouse enters any part. This is fine if you don’t actually need to click on the content initially shown within the button.

CSS3 and jQuery

The only solution I could come up with was to trigger a class on hover using jQuery. As you can see you are now able to mouse around within the button freely. The push is activated when hovering the final element on the button.

Constrained sticky sidebar with offset using jQuery

This constrained sidebar scrolls within a parent track. When the sidebar is fixed it has a margin from the top of the page to prevent it sitting against the edge of the window. Warning, this is not mobile tested although I did write a method to remove the fixed behaviour of the sticky when the window.height is less than the total of the sticky.height + sticky.margin.

BBC homepage style responsive slider built from scratch

If this doesn’t quite look right you might need to re-run the codepen as sometimes it gets a bit stuck while loading in the embed!

After BBC redesigned their homepage featuring a unique looking slider I decided to have a crack at my own version. Although the visual outputs are similar I approached the problem slightly differently and used some clever solutions to make it work responsively.

Simple jQuery lightbox concept

Here’s a simple lightbox concept built from scratch using jQuery. It loads a larger gallery image from a link around the smaller thumbnail image. You can close the lightbox overlay by clicking the cross, on the overlay or buy using the esc key. If you’re keen to use this don’t forget to add in a loading indicator.

Simple image scroller

Sometimes you’ll learn a lot more writing code yourself than by defaulting to a plugin. You’ll also have a lot more control over the final product while keeping things light weight. I wrote this image crossfader from scratch and kept it super simple. Check it out!