Awesome CSS Image Hover Effects That You Can Use on Your Carrd Website

Awesome CSS Image Hover Effects That You Can Use on Your Carrd Website

Carrd has its hover animations which are easy to use without knowledge of CSS.

There are 11 native animations:

CSS Image Hover Effects

But in specific situations, you might need much more but don’t worry because animating pictures using CSS on Carrd is a simple process that can add an extra level of engagement to your website.

Here are the steps to add a simple animation to a picture on Carrd:

Add embed element, change style for the hidden head then add one of those:

Shaking image on hover

.shaking-image {
transition: all 0.5s;
}
.shaking-image:hover{
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: rotate(2deg); }
10% { transform: rotate(-2deg); }
20% { transform: rotate(2deg); }
30% { transform: rotate(-2deg); }
40% { transform: rotate(2deg); }
50% { transform: rotate(-2deg); }
60% { transform: rotate(2deg); }
70% { transform: rotate(-2deg); }
80% { transform: rotate(2deg); }
90% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}

Jump animation on hover

<style>
.jump {
 transition: all 0.3s;
}
.jump:hover{
 animation: jump 0.5s;
}
@keyframes jump {
 0% { transform: translateY(0); }
 50% { transform: translateY(-30px); }
 100% { transform: translateY(0); }
}
</style>

Twist animation on hover

.twist {
 transition: all 0.3s;
}
.twist:hover{
 animation: twist 1s linear infinite;
}
@keyframes twist {
 0% {
 transform: rotateY(0deg) rotateX(0deg);
 }
 100% {
 transform: rotateY(360deg) rotateX(360deg);
 }
}

In the end, go to the image you want to animate to section settings (gear icon) and add the class name like in the picture below:

CSS animations for Carrd

Those are just 3 examples of CSS animations that you can use but not only, Carrd allows you to add almost any kind of CSS animation.

See more templates | Try Carrd | Need help? Contact me.

Leave a Reply

Create a Fast and Cheap Online Store with Carrd and Shoprocket

Create a Fast and Cheap Online Store with Carrd and Shoprocket

Creating an online store can be a daunting task, but with the right tools, it’s easy to create a fast and affordable online store that looks professional and easy to navigate. In this tutorial, we will show you step-by-step how to create an online store using Carrd and Shoprocket. Step 1: Sign up for a Carrd.co account The first step […]

Read more
Best Way to Add a blog in Carrd

Best Way to Add a Blog in Carrd

A common issue with Carrd is the lack of a built-in blog feature. However, there is a solution that allows for the addition of a blog smoothly and seamlessly. First, let’s look at why it’s a problem not having a blog on Carrd. Businesses or product founders who build their site on Carrd cannot include easily company updates or show […]

Read more
Top WordPress Themes for Optimizing Core Web Vitals

Top WordPress Themes for Optimizing Core Web Vitals: Astra, GeneratePress, OceanWP, Schema Lite

Looking to optimize Core Web Vitals? Discover the best WordPress themes for the job! Astra, GeneratePress, OceanWP, Schema Lite, and Neve top the list, offering speed, responsiveness, and clean code. With customization options, enhance your website's performance and improve search engine rankings.

Read more

Help us find great content

Try Carrd

Newsletter

Launch faster using templates: Sign up to stay updated.

About

Templatery offers one-page website templates made just for small businesses. Our designs are user-friendly and crafted to meet the specific needs of small business owners.

Simplify your journey to a standout website with Templatery.

Submit