Horizontal Curtain Effect not Good

I am struggling with something. Look at the effect I have.

$(document).ready(function() {
                $('.main-img').on('mouseover', function(){
                    $(this).siblings().css({ 'width': '30%' });
                    $(this).css({ 'width': '40%' });
                });

                $('.main-img').on('mouseleave', function(){
                    $(this).css({ 'width': '33.33%' });
                    $(this).siblings().css({ 'width': '33.33%' });
                });
            });

body {
                width:100%;
            }
            
            .main {
                width:100%;
            }
            
            .main-img {
                background-repeat:no-repeat;
                background-size:auto 100%;
                background-position:center;
                width:33.33%;
                height:500px;
                float:left;
                transition:linear .2s;
            }
            
            .img-1 {
                background-image:url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg');
            }
            
            .img-2 {
                background-image:url('https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg');
            }
            
            .img-3 {
                background-image:url('https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_960_720.jpg');
            }

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="main">
            <div class="main-img img-1"></div>
            <div class="main-img img-2"></div>
            <div class="main-img img-3"></div>
        </div>
    </body>
</html>

It is good but not perfect and I am trying to improve this. When moving the cursor among the images you will see what I mean. Sometimes the last image even goes below and I don't want it to happen. Besides that, the last image is not always aligned to right margin. How can I improve this code?

Solution

Here goes a CSS only answer

body {
            width:100%;
        }
        
        .main {
            width:100%;
            display: flex;
        }
        
        .main-img {
            background-repeat:no-repeat;
            background-size:auto 100%;
            background-position:center;
            flex-basis:33.33%;
            height:500px;
            float:left;
            transition:linear .2s;
        }
        
        .main-img:hover {
          flex-basis: 40%;
        }
        
        .img-1 {
            background-image:url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg');
        }
        
        .img-2 {
            background-image:url('https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg');
        }
        
        .img-3 {
            background-image:url('https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_960_720.jpg');
        }

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="main">
            <div class="main-img img-1"></div>
            <div class="main-img img-2"></div>
            <div class="main-img img-3"></div>
        </div>
    </body>
</html>