Hovers Effects
Hover Effects
Hover effects is a general term that can be used to describe any animations that are hover based, including links, images, feature boxes or cards, icons, and anything else on a webpage that changes, or reveals content when you mouseover the element.
Hover effects can really strengthen user experience by enhancing interactivity & visual feedback on important elements within a webpage.
Jessica Henderson
Job Title/Position at Company
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet urna est, sed commodo magna fermentum nec. Praesent vulputate ante in eros rutrum semper. Morbi ullamcorper lorem magna, quis auctor est gravida eu.
Integer quis finibus nunc, nec dictum dui. Nullam vel tempor lacus. Fusce et nibh vitae orci malesuada tincidunt vitae at dolor. Mauris rhoncus, ante vel accumsan volutpat, odio est fermentum quam, vitae pellentesque metus ligula ac nulla.
Jessica Henderson
Job Title/Position at Company
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet urna est, sed commodo magna fermentum nec. Praesent vulputate ante in eros rutrum semper. Morbi ullamcorper lorem magna, quis auctor est gravida eu.
Integer quis finibus nunc, nec dictum dui. Nullam vel tempor lacus. Fusce et nibh vitae orci malesuada tincidunt vitae at dolor. Mauris rhoncus, ante vel accumsan volutpat, odio est fermentum quam, vitae pellentesque metus ligula ac nulla.
Broken Devices
Lorem ipsum dolor sit amet.
Fusce elementum augue eget dui tempor, non cursus sem.
Going Green
Lorem ipsum dolor sit amet.
Fusce elementum augue eget dui tempor, non cursus sem.
Health Care
Lorem ipsum dolor sit amet.
Fusce elementum augue eget dui tempor, non cursus sem.
Sharing Adventure
Lorem ipsum dolor sit amet.
Fusce elementum augue eget dui tempor, non cursus sem.
Hover Section with 3D Feature Image
The animation visible to the right (or below if your viewing on mobile) is done with a standard image that has a class associated with it, and and just a few lines of custom CSS.
This feature is restricted to only images. So, in other words, we cannot use text content within. It needs to consist of a background image and a cropped image of an object overtop. The transition duration and the rotation degree can be adjusted easily.
Hover ID Cards
This ID card animation is meant to be a hover animation but it didn’t perform very well so right now, they flip when you CLICK on them.
Developer Card
Team Member
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad fugiat at laboriosam quo, facere quam quos fugit! Suscipit, vero, explicabo ipsam iure.
Developer Card
Team Member
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad fugiat at laboriosam quo, facere quam quos fugit! Suscipit, vero, explicabo ipsam iure.
Developer Card
Team Member
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad fugiat at laboriosam quo, facere quam quos fugit! Suscipit, vero, explicabo ipsam iure.
Move Your Finger or Mouse
Now scroll works too on mobile!
Kraken Callouts – Kraken Cowbell
The feature boxes below were built using our Kraken Cowbell plugin, with the Kraken Callouts Block.
Test One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, enim nec dapibus iaculis, magna neque porttitor risus.
Test Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, enim nec dapibus iaculis, magna neque porttitor risus.
Test Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, enim nec dapibus iaculis, magna neque porttitor risus.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt risus eu, auctor dui faucibus.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt risus eu, auctor dui faucibus.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt risus eu, auctor dui faucibus.