нажмите externalbox, перенаправьте на страницу и внутреннее окно откройте модально

Question

см. Прикрепленный скриншот. в этом, когда я нажимаю значок «я», он открывает модальный. но мне нужно предоставить ссылку на внешнее поле этого значка "я". также при наведении на изображение, оно немного увеличивает изображение, используя эффект «длительность перехода». Теперь я хочу предоставить ссылку на внешнюю коробку. пожалуйста, помогите мне решить эту проблему.

[! [введите описание изображения здесь] [1]] [1]

, также используя https://maxcdn.bootstrapcdn.com/bootstrap/scss/_card.scss для стиля.

    <div class="card-img">
        <img class="card-img-top" src="http://test.com/ter122.jpg" alt="Card image cap">
        <div class="overlay">
            <div class="info-circle">
                <span>
                    <a href="#" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-info" data-toggle="tooltip" data-placement="top" title="Quick Info" aria-hidden="true"></i></a>
                </span>
            </div>
        </div>
    </div>   
</div>
<style>
.card {
    border: 1px solid #eee;
    border-radius: .1rem;
}

.card-body {
    padding: 1rem;
}

.card-img {
    position: relative;
    overflow: hidden;
}

.card-img img {
    transition: all 0.5s;
}

.card .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.5);
}

.card-img:hover .overlay {
    opacity: 1;
}

.card-img:hover img {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.info-circle i {
    color: #fff;
    border-radius: 30px;
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 35px;
    height: 35px;
    line-height: 32px;
}

.info-circle {
    width: 100%;
    height: 100%;
}

.info-circle i:hover {
    background: #e1122c;
}</style>```


  [1]: https://i.stack.imgur.com/Zty0C.png