We all love transitions, they personally make my heart skip a beat. I never get tired of watching them, especially as I’ve known the web since about 10 years ago. CSS has come a long way, technology and browsers have been enhanced, when put together it enables visualizations within the browser. Here is a hand-picked list of great effects that are available for free around the web.
iHover
The iHover resource provides many examples of how you can use CSS against an image to give it that little extra pizzazz. The tiny library comes without any dependencies meaning its ready to download and go! Be sure to check the very first examples on the page, namely the Circle demos. They boast multi-colored borders and change as you move your mouse over. There are around 35 examples, both as a circle and square designs to view and of course, if you love any of them, there is a how to use guide.
Resource URL: iHover
ImageHover.io
ImageHover.io comes equipped with an MIT License. This means it is free to use for your own projects, yay! Moreover, the resource has a more modernized approach to show off CSS3’s superpowers. The 19kb tiny library boasts 44 free visuals to spice up your web design game. With these visuals including reveal text on hover, sliding, hinge, flip and many more. This hover image library comes with detailed documentation guiding you on how to get set up and start using the effects.
Resource URL: ImageHover.io
NXWorld.net
For this styled hover effect resource, you will most probably need to use the Google Chrome web browser as the content is not in the English language. Use chrome to translate it and you’re ready to go. Additionally, NXWorld’s CSS3 tips page shows each demo with the exact styles to go with it. This is pretty handy when you just want a feel for things on the fly. Each demo gives a small description of how the styles work to execute the effect which is another perk. Overall, this is a great learning resource as well as a cool freebie.
Resource URL: NXWorld.net
Bootstrap
Now, although this next resource is geared towards bootstrap, it isn’t a necessity, you can simply remove the col classes from the top-level divs within the source code. The creator, Mike Tricking has really blown me away with these examples. One of the hovering effects is even capable of displaying social media buttons within a diamond border as you hover, which, in my personal opinion, is absolutely fantastic. To see the one I’m talking about, look at the 3rd square down on the left within the grid.
To show off, even more, this resource lets you click a ‘Show Code’ button that makes a modal box popup. Within the modal, you can see the HTML and CSS styling used to pull the demo off. From there its a simple copy & paste job to get it into your project! This really is a five-star showcase of image hover effects.
Resource URL: Bootstrap Hover
Image Caption Hover Animation
Hasinhayder’s CSS library is a really trendy resource that shows its animations over some eye-catching cartoon graphics. They are plain and simple but, in many cases, less is more. The first resource URL below shows the demos in their full glory. The second is a link to the GitHub repository so you can get your hands on the source code. These special style effects are more catered towards having a textual caption ‘pop-up’ over the element and not so much super-transitional based.
The source can be glanced at by going into either of the HTML index files in the repository. The files include the full styles and HTML needed to get the desired animations within them.
Resource URL 1: Caption Hover Animation Demos Resource URL 2: Caption Hover Animation Source
W3schools Image Overlay Hover
If you’ve used W3Schools before, you will already know what a great resource it is for learning front end web development. These hover effects are split over a few pages within the W3Schools website and are set out beautifully. It provides demos and a ‘Try It Yourself’ button for each one. Once you click on the button, it loads up a code and execution area interface that lets you play with the code and re-run to see the result. The demos include slide, fade, zoom and more.
If you have a few spare minutes, I would advise having a wander around the site to see what it has to offer in terms of learning. As I said, it’s a really great resource and perfect for beginners. All of the source code showed in tutorials are free to use which is a bonus!
Resource URL 1: Overlay Fade Resource URL 2: Overlay Slide Resource URL 3: Overlay Zoom Resource URL 4: Overlay Title Resource URL 5: Overlay Icon
MotoCMS
MotoCMS has an extremely informative post about how to perfectly create image hovering styles. It guides you with the process of 8 different effects with the HTML & Stylesheet ready to be used. Although this isn’t a downloadable resource, it’s a great learning resource again. The post includes the use of CSS3 transitions which are a more modernized approach to image hovering. Try messing around with the transition times in your own projects, it’s pretty fun and you can really make it your own. The writer even gives you the cross-browser compatibility styles like -webkit and -moz.
Resource URL 1: MotoCMS CSS Image Tutorial
FreeFrontEnd
Put some time in your diary for this incredible resource, it has a super-total of 64 effects to demo and download. Each of the demos is shown in a CodePen and you can either grab the HTML & CSS3 from there. Alternatively hit the back button and click the download link under that effect. There is a wide selection of effects including 3D and panorama. You’ll certainly have fun viewing each one of these! The FreeFrontEnd resource once again affirms the power of CSS3 in today’s technology.
Resource URL 1: FreeFrontEnd
Summary
This list of free and open-sourced libraries have been hand-picked in the year 2018. They are bound to go out of date very quickly though. For this year, there is a lot of great resources for this type of styling for your web pages. These hand-picked libraries of CSS hover image effects are the very best I could personally find and review. I hope you have fun with them!
Source: Codewall
The Tech Platform
Comments