Swap images on hover in Cargo Site

Do you want to learn how to swap images on hover in Cargo Site?

Swapping images on hover can make your site more interesting and fun to explore. You can use this effect to show different pictures when someone moves their mouse over them.

In this guide, we’ll show you how to do it step by step. We will be using custom HTML and CSS to create this functionality.

Add Swap images on hover in Cargo 3

Let’s first learn how to add image swap functionality on hover in Cargo 3 sites. Follow the steps below:

Step 1: Upload images to Cargo 3 editor

Start by logging in to your Cargo 3 editor and uploading the images you want to use. Once the images are uploaded, we need to copy the image URL. Instead of directly dragging the images into the editor, which will cause issues with the CSS code we’ll add later, we’ll copy the image URL.

To copy the image URL, hover over the image thumbnail. You’ll see a yellow arrow appear. Click on it, and the image will open in a new tab. Simply copy the URL from the address bar.

Step 2: Add HTML code in the Code Editor

Now, open the local code editor by clicking on the code icon. Then, in the HTML tab, we’ll paste the HTML code.

<a class="image-link imgDiv" href="/project"> 

<img class="firstImg" src="https://freight.cargo.site/t/original/i/F1693156068901488801364612219536/Frame-1-62-1.png">
<img class="secondImg" src="https://freight.cargo.site/t/original/i/X1693156068883042057290902667920/Group-58-2-1.png">
</a>

Code explanation –

1. Prepare Two Images: We’re setting up two images to use on our website. The first image, which we’ll call the “main image,” is represented by the <img> tag with the class “firstImg.” This image is what people see at first. The second image, shown when someone hovers over the main image, is represented by another <img> tag with the class “secondImg.” These tags tell the website where to find each image and how to display them.
2. Update Image URLs: For both images, make sure to put the web address where each image is stored. This helps the website know where to find the images.
3. Wrap Images in a Link: Put both images inside a link. This link makes it possible for someone to click on the images and go to another page. If you want the images to just look fancy without going anywhere when clicked, you can skip this step.
4. Add Classes for Styling: Give the link a special name, like “image-link imgDiv.” This name helps us change how the images look using styles.

So, in simple terms, we’re setting up two images: one main image and one that appears when you hover over the main one.

Step 3: Add CSS in the Code Editor

Switch to the CSS tab and add the following CSS –

img{
  width: 100%;
}
@media(min-width:768px){
	.imgDiv:hover > .secondImg{
        display: block;
    }
    .imgDiv:hover > .firstImg{
        display: none;
    }
    .secondImg{
        display: none; 
    }
   
}
@media(max-width:768px){
	.secondImg{
		display: none !important;
	}
}

CSS Code Explanation:

This CSS code creates the image swap functionality through a combination of CSS selectors and media queries.

1. Initial Setup:
   • The img { width: 100%; } the rule ensures that all images take up the full width of their container, ensuring consistency in the display.
   • The .secondImg { display: none; } the rule initially hides the second image (secondImg class) by default.
2. Media Queries:
   • @media (min-width: 768px) { ... }: These styles apply when the screen width is 768 pixels or larger, typically for medium to large screens like tablets and desktops.
3. Hover Effects:
   • .imgDiv:hover > .secondImg { display: block; }: When hovering over an element with the class imgDiv, this rule displays the second image (secondImg class), effectively swapping it in when the mouse hovers over the container.
   • .imgDiv:hover > .firstImg { display: none; }: At the same time, it hides the first image (firstImg class) when the mouse hovers over the container, creating the swap effect.
4. Fallback for Small Screens:
   • @media (max-width: 768px) { ... }: These styles apply when the screen width is smaller than 768 pixels, typically for smaller screens like smartphones.
5. Responsive Handling:
   • .secondImg { display: none !important; }: This rule ensures that the second image remains hidden on smaller screens, overriding any other CSS rules. It prevents the second image from accidentally showing on devices where hover effects might not work well or make sense.

Overall, this combination of CSS rules and media queries creates a simple yet effective image swap functionality. When the mouse hovers over the designated container (imgDiv class), the first image is hidden while the second image is displayed, giving the appearance of an image swap.

Step 4: How to add swap images in columns

Above we have discussed only one image swap what if you want to add multiple images with swap functionality inside a column?

To add swap image functionality to images in each column of a two-column layout, follow these steps:

1. Create the Two-Column Layout: After adding the two-column layout to your Cargo site, the HTML code will resemble the structure shown in the image below.
2. Identify Image Locations: Each column will contain an image. In the HTML structure, locate the first column (slot=”0″) and the second column (slot=”1″).
3. Add HTML Code: Copy and paste the HTML code provided earlier for each image. Place the code for the first image in the first column and the code for the second image in the second column. In the image attached below, I have created the red rectangle shape for image one and the green rectangle for image two.
4. Update Image URLs: Replace the image URLs in the HTML code with the URLs of the images you want to use. You can repeat this process for additional columns if needed.
5. Apply CSS: Apply the CSS code discussed earlier to your Cargo site’s CSS file. This CSS code creates the swap image functionality when hovering over the images.

Add Swap images on hover in Cargo 2

Let’s learn how to add image-swapping functionality in Cargo 2 sites. Follow the steps below:

Step 1: Upload images to Cargo 2

Upload the images in Cargo 2, in cargo 2 we do not need to copy the image URL and use the img tag like Cargo 3 we can simply drag the image inside the Cargo 2 editor.

Step 2: Add HTML code

Now click on the “CODE VIEW” button at the bottom right of the screen it will open the local code editor. There you will find the two images to which we have added .

Now you have to make your images like this code(please see image attached nelow) –

<a class="imgDiv" href="/project"> 
<div class="firstImg">{image 2} </div>
<div class="secondImg">{image 1} </div>
</a>

1. Wrap Images with Divs:
   • Create two <div> elements and wrap each image inside its own <div>.
   • Give the first <div> the class “firstImg” and the second <div> the class “secondImg“.
2. Wrap Images with <a> Tag:
   • Wrap both <div> elements containing the images inside a <a> tag.
   • Give the <a> tag the class “imgDiv”.
   • Optionally, set the href attribute of the <a> tag to the page URL you want the images to link to. If you don’t want them to link to any page, set the href attribute to “#” instead.

Step 3: Add CSS code

Now go to the Design tab, click on CSS editor, and paste the following CSS code.

@media(min-width:768px){
	.imgDiv:hover > .secondImg{
        display: block;
    }
    .imgDiv:hover > .firstImg{
        display: none;
    }
    .secondImg{
        display: none; 
    }
}
@media(max-width:768px){
	.secondImg{
		display: none !important;
	}
}

Conclusion

In summary, by following these steps, you can easily add swap images on hover in Cargo Site. First, prepare your images and obtain their URLs. Then, wrap the images in <div> elements and apply CSS hover effects for the swapping effect. Optionally, link the images to specific pages or keep them unlinked. With these simple steps, you can enhance the visual appeal and user interaction of your Cargo site effortlessly.

If you run into any issues, feel free to drop your query in the forum. 

I hope you have enjoyed reading this blog.🚀