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

how to make a landing page on squarespace

Ultimate Guide: 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
One-Page Website Benefits: Streamline Your Online Presence

One-Page Website Benefits: Streamline Your Online Presence

Discover the top benefits of a one-page website and why it could be the game-changer your business needs. Read on for insights! Introduction Gone are the days when a sprawling website was the only way to make an impact online; let’s talk about the sleek efficiency of one-page websites. These streamlined sites cut through the […]

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

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 solopreneurs. Our designs are user-friendly and crafted to meet the specific needs of individual business owners.

Simplify your journey to a standout website with Templatery.

Submit