No transitions on hover anywhere on the site

[MughilM]

Hello,
This is a great theme. However, I did notice a bug. For starters, I wanted to do some minor customization, and do a hover effect on the links in the navigation pane. This should be a simple css addition. But even after doing that no transition occurred.

I examined further in the theme.scss, and found that cards in the blog should have their title undergo a size change when hovered over. I've put the relevant snippet below.

.blog-grid-item {  
    color: #333;
    padding: 0;
    display: flex;
    align-items:center;
    .author-thumb {
        width:40px;
        border-radius:50%;
        margin-right: 7px;
    }
    .card {
        border:0;
        &:hover {           
           .card-title a { 
                background-size: 100% 100%;
            }
        }
    }
    .card-title {
        font-weight:700;
        font-size:22px;
        line-height:1.4;
        a { 
            background-image: linear-gradient(180deg, transparent 89%, $primary 0);
            background-repeat: no-repeat;
            background-size: 0 100%;
            transition: background-size .6s ease;
            position:relative;
            &:hover {
                text-decoration:none;
            }
        }
    }
...

When I hover over them, no animation or size change occurs, the card stays static, but I can still click the link. This is on a local Jekyll build and serve. I've also discovered that this doesn't happen on the public site showcasing the theme.

Any help is appreciated. Thanks!

[shoaiyb]

I also experienced it. It needs to be fixed.

I tried debugging it but couldn't know where to start so I start with disabling JavaScript, and it worked. It seems the JavaScript causes all the bugs.