HTML/CSS hover background image - html

Question

I have a problem with putting an img for hover background.
It should look like this : Navigation
These 2 lines, represent the hover transparent image, and the text "home" should be in center of that img.. I have no idea how to do that... Anyone ?
Sorry if my english is bad
.page-container {
width: 980px;
margin: 0 auto;
text-align: center;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 220px;
background-color: #EAEAEA;
}
.logo {
text-align: center;
}
.logo img {
margin: 30px 0 0 0;
}
nav {
height: 136px;
}
ul {
list-style-type: none;
display: inline-block;
margin: 70px 0 0 0;
padding: 0;
}
nav li {
float: left;
text-align: center;
}
nav li a {
margin-right: 165px;
text-decoration: none;
float:left;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
font-family: font91477;
color: #9E9E9E;
background-size: 75px;
}
a:focus {
text-decoration: none;
color: #9E9E9E;
}
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<div class="page-container">
<ul>
<li>Home</li>
<li>O Podjetju</li>
<li>Produkti</li>
<li><a class="last-child" href="#">Kontakti</a></li>
</ul>
</div>
</nav>
</header>

Answer 1

just add the following css styles
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
/*****************here they are ************/
display:flex;
align-items: center;
}

Answer 2

Why you don't make it in css ? Something like this
.menu{
list-style: none;
background-color: #EAEAEA;
margin: 0;
padding: 20px 0;
overflow: hidden;
}
.menu__item{
float: left;
margin: 0 20px;
position: relative;
}
.menu__item a{
background-color: #EAEAEA;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.menu__item::after{
content:'';
width: 1px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: rotate(-45deg);
z-index: 0;
transition: all .25s ease;
}
.menu__item:hover::after{
width: 50px;
margin: -1px 0 0 -25px;
}
<ul class="menu">
<li class="menu__item"><a>Home</a></li>
<li class="menu__item"><a>test</a></li>
<li class="menu__item"><a>very long title for test</a></li>
<li class="menu__item"><a>test</a></li>
</ul>