JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="banner">
    <div class="external">
        <a href="#">Размести баннер здесь!</a>
    </div>
    <div class="dummy">
        <div class="inner">
            <p>Ваш баннер здесь! Размеры 940 на 96.</p>
            <p><a href="#">Разместить!</a></p>
        </div>
    </div>
    <div class="content">
        <img alt="" src="http://dosugovo.i-dl.ru/attach/banner_11.jpg" style="width: 940px; height: 96px;" />
    </div>
    <div class="servicelinks">
        <a href="#">Размести баннер здесь!</a>
        <a href="#">Размести баннер здесь!</a>
    </div>
</div>

CSS

.banner {
    width: 940px;
    height: 96px;
    border: 1px solid #aaa;
    position: relative;
}
.content {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: none;
}
.dummy {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    background: #fbf4d7;
    line-height: 96px; /* !!! */
}
.dummy::before {
   content: ' ';   
}
.dummy .inner * {
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    padding: 0;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
}
.external {
    position: absolute;
    bottom: -20px;
    right: 0;
}
.servicelinks {
    position: absolute;
    display: none;
    background: #ddd;
    padding: 5px;
}
.banner:hover .servicelinks {
    display: block;
}