Image Effects

Carrd has some image hover animations built in (see screenshot here). The ones shown on this page are others you can achieve with code.

Note: These will require Carrd Pro Standard for the use of the Advanced Settings and/or Embed element

Scale effect

Steps

1. Add a CSS classname to the image in the Settings tab (cog icon), in the Classes box – I've used the name scale

2. Add the following CSS in an Embed element, set as Hidden, in Head:

<style>
.animate {transition: transform .2s;}
.animate:hover {transform: scale(1.05);}
</style>

Swap image

Steps

For this effect, you will need to build it in custom HTML/CSS.You will need a URL for each image. An easy way to do this is to add each image to the bottom of your Carrd site, then add a Control element above them, set to Section Break.Then publish you site, go to the page where your images are (probably https://yoursite.com/#section01) and copy the image URLs for each image. Then follow the next steps below.

1. Add the following HTML in an Embed element, set as Inline. Replace the parts marked with IMAGE-LINK with your own image URLs.

<div class="swap">
<img class="image-main" src="IMAGE-LINK1">
<img class="image-hover" src="IMAGE-LINK2">
</div>

2. Add the following CSS in an Embed element, set as Hidden, in Head:

<style>
.swap {
height: 130px;
position: relative;
max-width: 100%;
}
.swap img.image-main {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
}
.swap img.image-hover {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
opacity: 0;
transition: opacity .2s;
}
.swap:hover img.image-hover {
opacity: 1;
}
</style>

Tip: you will need to adjust the Height in the first section of CSS to suit the height of your image.