Thumbnail hover index in Cargo 3 (with Code)

In this blog we are going to see how you can add thumbnail hover index in your Cargo 3 site.

If you want to know in detail about what is Thumbnail index and how you can add it in your Cargo 2 site you can check out this blog. Click here

Step by Step guide to add Thumbnail hover index in Cargo 3

Add Project Set and project pages

Upload Thumbnail images for Projects

Add Thumbnail index in Home Page

Thumbnail index settings

Add CSS code for Thumbnail index on hover in Cargo 3

.frame{
   position: relative;
}

[thumbnail-index] .caption {
   text-align: left !important;
   padding: 2rem;
}

.caption{
    color: #fff !important;
    position: absolute;
    text-align: left;
    width: 100%;
    top: 0px;
    background: rgba(0, 0, 0, 0.8) !important;;
    height: 100%;
    display: none !important;
}
.frame:hover .caption{
   display: block !important;
}

.thumbnail:hover .caption{
   display: block !important;
}
media-item .caption {
    margin-top: 0 !important;
}

Conclusion

It is quite easy to add thumbnail index on hover in Cargo 3 site.

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

I hope you have enjoyed reading this blog.🚀