Xenforo Customization

Add a zoom-in effect on a thumbnail in the article.

Sameer Memon
Sameer Memon
1 Min Read
zoom in or magnifying effect in thumbnail for xenforo
- Advertisement -

Hello readers, today we are going to add a zoom-in/magnification effect to the thumbnails in articles in Xenforo.

If you publish articles, this effect will give a nice addition to the look of the forum

Check the demo:

DEMO

For this Just go to  ACP->Appearance->Templates and search for extra.less

add the following codes:

.articlePreview-main a:hover {
    transform: scale(1.1) rotate(4deg);
    background-size: cover !important;
    transition-duration: 1s;
    transition-property: transform;
}
.articlePreview-main a {
    background-size: cover !important;
    transition-duration: 1s;
    transition-property: transform;
}
.message--articlePreview .articlePreview-image:after {
    background-image: linear-gradient(to bottom,transparent,#0e0e0e);
    opacity: .1;
    padding-bottom: 60%;
}
.articlePreview-main {
        overflow: hidden;
}

Click Save when done.

- Advertisement -
- Advertisement -
TAGGED:
By Sameer Memon
Follow:
Sameer Memon is a passionate writer with 3 years of experience in Blogging. With a strong background in Blogs, SEO, and Social Media Marketing, Sameer has been creating engaging content on various topics for a wide range of clients. As a dedicated and driven individual, Sameer takes pride in delivering well-researched and thoughtfully written articles that provide readers with valuable insights and information. He is constantly striving to stay up-to-date with the latest industry trends and techniques to produce content that is not only informative but also engaging and easy to read. When Sameer isn't busy writing, he enjoys gaming. He also loves to explore new places to gain fresh perspectives and inspiration for his writing. If you're interested in learning more about Sameer and his work, you can follow him on social media platform at give handles.
- Advertisement -