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.

Rate

Leave a Reply

how to make a landing page on squarespace

Making a Squarespace Landing Page That Converts

Creating a captivating landing page on Squarespace might seem daunting at first, but it’s surprisingly straightforward once you know the ropes. I’ve been there, staring at a blank canvas, wondering where to start. But trust me, with a bit of guidance, you’ll be crafting your own stunning landing pages in no time. Squarespace is a […]

Read more
How to Optimize Photos for Your Website

How to Optimize Photos for Your Website

Why is it worth preparing and optimizing photos before uploading them to the website? Here is a step-by-step photo optimization guide. 1. Photo size (px) To begin with, try to determine what size of images you will need for selected sections on your website. For example, a full-width photo should be of such size that […]

Read more
How to Customize Your Carrd Template for Maximum Impact

How to Customize Your Carrd Template for Maximum Impact

Take your Carrd website to the next level with these customization tips! Learn how to make the most of your template and create a stunning website. Carrd is a popular website builder that allows users to create simple, yet effective, one-page websites. While Carrd offers a variety of templates to choose from, customizing your website can […]

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