Как сделать блок ссылкой?

Question

[LastGeneral]

<div class="offers">
    <div class="offers-item offers-video">
        <div class="offers-listen">
            <div class="offers-item-img">
                <img src="https://seoquickcomua.r.worldssl.net/wp-content/uploads/2019/06/support.png">
            </div>
            <h3>Видеореклама</h3>
            <a target="_blank" href="#"></a>
        </div>
    </div>
    <div class="offers-item offers-banner">
        <div class="offers-listen">
            <div class="offers-item-img">
                <img src="https://seoquickcomua.r.worldssl.net/wp-content/uploads/2019/06/support.png">
            </div>
            <h3>Видеореклама</h3>
            <a target="_blank" href="#"></a>
        </div>
    </div>
    <div class="offers-item offers-ticker">
        <div class="offers-listen">
            <div class="offers-item-img">
                <img src="https://seoquickcomua.r.worldssl.net/wp-content/uploads/2019/06/support.png">
            </div>
            <h3>Видеореклама</h3>
            <a target="_blank" href="#"></a>
        </div>
    </div>
</div>

.offers {
    display: flex;
}
.offers-listen {
    padding: 20px;
}
.offers-item-img {
    background-color: #65c6c7;
    border-radius: 50%;
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 100px;
    padding: 8px;
}
img {
    width: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.offers-item:hover .offers-item-img {
    background-color: #fd4d00;
    width: 120px;
    height: 120px;
}
.offers-item:hover .offers-listen {
    box-shadow: 0 0 21px rgba(74, 74, 74, .29);
}
h3 {
    text-align: center;
}

Comments

[twobomb]

Обернуть его в тег a

[LastGeneral]

twobomb, Вы же знаете что так нельзя делать?

[twobomb]

LastGeneral, Можно, все делали и будут делать, может такое изначально и не планировалось, и некоторые валидаторы будут ругаться, ну все современные браузеры уже давным давно такое хавают и никто не парится.

Answer 1

[Александр]

Блок в position: relative;, а ссылке

a::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: '';
}