My content is wrap when i hover on box how it fixed?

Question

I was trying to set a border when hovering over box but the text within box is getting wrapped. This effect looks really bad and is not what I wanted to achieve. Is there a way to fix this using only CSS? The HTML is fixed and should not be changed.

.box {
                height: 300px;
            }
            .box .box-image {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                height: 100%;
                width: auto
            }
            .box .box-content {
                position: absolute;
                left: 40px;
                bottom: 40px;
            }
            .box .box-content h5, .box .box-content p {
                color: #fff;
            }
            .box a {
                display: block;
                height: 100%;
                width: 100%;
                position: relative;
            }
            .box:hover .hover-effect {
                border: 10px solid blue;
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="p-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 box">
                        <a href="#" class="hover-effect">
                            <div class="box-content">
                                <h5>Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            </div>
                            <div class="box-image" style="background-image: url(http://placekitten.com/800/800);"></div>
                        </a>
                    </div>
                    <div class="col-md-4 box">
                        <a href="#" class="hover-effect">
                            <div class="box-content">
                                <h5>Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            </div>
                            <div class="box-image" style="background-image: url(http://placekitten.com/800/800);"></div>
                        </a>
                    </div>
                    <div class="col-md-4 box">
                        <a href="#" class="hover-effect">
                            <div class="box-content">
                                <h5>Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            </div>
                            <div class="box-image" style="background-image: url(http://placekitten.com/800/800);"></div>
                        </a>
                    </div>
                </div>
            </div>
        </section>