CODEWITHSUNDEEP
htmlcsssassresponsive-designfrontend
rohanpandav
rohanpandav

Reputation: 35

HTML and SASS are linked together yet they don't function normally

Here's my HTML File's Div's Code -

<section id="top-sale">
                <div class="container py-5">
                    <h4 class="font-rubik font-size-20">Top Sale</h4>
                    <hr>
                    <!-- Owl Carousel -->
                        <div class="owl-carousel owl-theme">
                            <div class="item py-2">
                                <div class="product font-rale"><a href="#"> <img src="./assets/products/s10.png" alt="product1" class="img-fluid"></a>
                                    <div class="text-center">
                                        <h6>Samsung Galaxy S10</h6>
                                        <div class="rating text-warning font-size-12">
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="far fa-star"></i></span>                                            
                                        </div>
                                        <div class="price py-2">
                                            <span>₹14200</span>
                                        </div>
                                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                    </div>                 
                                </div>
                            </div>
</section>

Here's my SASS file's code -

>#top-sale{
    .owl-carousel .item .product a{
        overflow: hidden;
    }

    .owl-carousel .item .product img{
        transition: transform .5s ease;
    }

    .owl-carousel .item .product img:hover{
        transform: scale(1.1);
    } }

My VSCode is unable to detect "img:hover" and it isn't functioning at all. What could be the fix?

Upvotes: 1

Views: 45

Answers (1)

Shoowack
Shoowack

Reputation: 26

It works for me, although I removed

>

character before

>#top-sale

you can check it here: https://codepen.io/shoowack/pen/ExKgVJW

Upvotes: 1

Related Questions