Как при наведении на меню сделать всплывающую картинку?

Здравствуйте.

Я пытаюсь сделать как здесь https://drive.google.com/open?id=1NiRgRYgiqTicKjaj7xc1k6moK1yL-BBj
То есть, чтобы при наведении на меню появлялась картинка в виде мазка кистью.

Я пыталась сперва с помощью ul.menu li a:hover добавить изображение, но оно резалось.

Окончательно вот что получилось https://drive.google.com/open?id=1Stqfx8wHEtyf86SgsaemlZOXfFtbF00F

<ul class="menu">
	<li class="selected"><a href="#"> Обо мне </a></li>
	<li class="selected"><a href="#"> Портфолио </a></li>
	<li class="selected"><a href="#"> Отзывы </a></li>
	<li class="selected"><a href="#"> Контакты </a></li>
</ul>

ul.menu {
	float: left;
	margin-top: 40px;
	margin-left: 405px;
	padding-left: 20px;
}
ul.menu li {
	float: left;
	padding: 0;
	list-style: none;
	margin: 0;

}
ul.menu li a {
	text-decoration: none;
	color: #fff;
	font: normal 100% 'Philosopher';
}
ul.menu li a:hover {
	color: #ff4f9c;
    text-decoration:none;
}
.selected:hover {
    width: 157px;
    height: 36px;
	background-image: url(img/pri_navedenii.png);
    background-repeat: no-repeat; 
    background-size: contain;
}