Сразу извиняюсь за мой, возможно, грязный код. Собственно, в самом днище есть ссылка About me. При наведении на неё каким-то образом вклинивается Hello. Как это исправить? Или же как иначе можно реализовать подобное?
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'Lato', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
}
a,input{
outline: none;
}
main {
background-color: #3498db;
font-family: 'Lato', sans-serif; }
main section {
background-color: #3498db; }
main section .wrapper {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
width: 100%; }
main section .wrapper .element-wrapper {
display: inline-block;
vertical-align: middle;
width: 33.33333%;
height: 100%;
position: relative;
-webkit-transition: all .3s ease;
transition: all .3s ease; }
main section .wrapper .element-wrapper:hover span {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8); }
main section .wrapper .element-wrapper:hover .element-wrapper-hvr {
background-color: rgba(255, 255, 255, 0.6);
opacity: 1;
height: 60px;
-webkit-transform: scaleY(100%);
-ms-transform: scaleY(100%);
transform: scaleY(100%); }
main section .wrapper .element-wrapper .element-wrapper-hvr {
position: absolute;
height: 0;
bottom: 0;
width: 100%;
-webkit-transition: all .3s linear;
transition: all .3s linear;
text-align: center;
opacity: 0;
font-size: 35px;
line-height: 55px; }
main section .wrapper .element-wrapper:nth-child(odd) {
background: -webkit-linear-gradient(#bdc3c7, #ecf0f1, #bdc3c7);
background: linear-gradient(#bdc3c7, #ecf0f1, #bdc3c7); }
main section .wrapper .element-wrapper:nth-child(even) {
background: -webkit-linear-gradient(#e74c3c, #c0392b, #e74c3c);
background: linear-gradient(#e74c3c, #c0392b, #e74c3c); }
main section .wrapper .element-wrapper a {
display: block;
min-height: 270px;
position: relative;
text-align: center;
height: 100%; }
main section .wrapper .element-wrapper a span {
position: absolute;
top: 40%;
left: 0;
-webkit-transition: all .3s ease;
transition: all .3s ease; }
main section .wrapper .element-wrapper a img {
position: absolute;
top: 50%;
left: 50%;
display: block;
max-width: 90%; }
main .link-about {
display: block; }
main .link-about a {
padding: 15px 0;
display: block;
font-size: 1em;
background-color: rgba(41, 54, 65, 0.5);
color: white;
text-align: center;
text-transform: uppercase;
font-weight: 700; }
main .link-about a:hover {
background-color: #232c30; }
<main id="main" role="main">
<section>
<h2 id="port"></h2>
<div class="wrapper">
<div class="element-wrapper element-wrapper-1">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, possimus!</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-2">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, ex!</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-3">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, dolor.</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-4">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, optio!</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-5">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, a?</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-6">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, error?</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-7">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, nesciunt.</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-8">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, ab.</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
<div class="element-wrapper element-wrapper-9">
<a href="#"><span class="wrapper_element_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, ab.</span></a>
<p class="element-wrapper-hvr">HELLO</p>
</div>
</div>
</section>
<div class="link-about">
<a href="#">About me <i class="fa fa-arrow-right"></i></a>
</div>
</main>