I went through a number of questions regarding displaying image on hover here on Stackoverflow, but couldn't find a solution for my problem.

Right now I managed to display an image in the background of the paragraph once I hover on it. [See on JSFiddle.](https://jsfiddle.net/4tubcy8e/)

Ideally what would I like to do achieve: once I hover over an Example1 inside of a paragraph I would like to display Image1 in the background, not below the paragraph, but centered in the background, below all of the elements. [As pictured here](http://i.imgur.com/QaCWBh3.jpg). 

Hovering on Example2 would ideally display Image2, and Example3 would display Image3.

**HTML**

```
<div id="imgbg">
<p>Portfolio:</p>    
<p>I worked with:<br />
Example1, Example2, Example3, Example4, Example5
</p>
</div>

```

**CSS**

```
#imgbg {
height: 100%;
width: 100%;
}

#imgbg:hover {
background-image: url('http://i.imgur.com/9bbjE1Mb.jpg');
}

```

Does anyone have a solution? Many thanks.