What is the easiest way to show an image with text:hover?

Problem

I am trying to show an image(company logo 150 x 100 px) on text:hover when the user is coming on the company name. The image should show on the right side of the name.

I don't know if I can solve it with CSS3 or if I need some jQuery for it - which I wouldn't prefer much.

Any ideas?

My HTML

<div class="supplier_box_top">
    <p class="name">Company Name</p>
    <p class="city">Country</p>
    <p class="info" ><a href="#" target="_blank" id="1" class="show_info_box">nfoBox</a></p>
    <p class="site_link"><a href="javascript:void(0)">www.your-company.com</a></p>
</div>
Problem courtesy of: Teo

Solution

If the <img> is placed after the Company Name .name, Then you could use adjacent a + b or general a ~ b sibling selectors to display the image:

img.logo {
   display: none;
}

.name:hover ~ img.logo {
    display: inline;
}

However, you could put the image inside the same paragraph and use the following:

<p class="name">Company Name <img src="" /></p>
.name {
   position: relative;
}

.name img {
   position: absolute;
   left: 100%;
   display: none;
}

.name:hover img {
    display: inline;
}
Solution courtesy of: Hashem Qolami

Discussion

This can be easily achieved with CSS3:

.name:hover::before {
    content: url(your_image_url.jpg);
    float: right;
}

Note: the path to the image is relative to the CSS file

Thats the most basic solution. The image will be floating the company name from the right side. Do you want more sophisticated styling?

However if you want to support also IE7 and older you should add the image traditional way and style the hover the same as in the example above, like this:

HTML:

<div class="supplier_box_top">
    <p class="name">
        <img class="company_image" src="my_image.jpg">
        Company Name
    </p>
    <p class="city">Country</p>
    <p class="info" ><a href="#" target="_blank" id="1" class="show_info_box">nfoBox</a></p>
    <p class="site_link"><a href="javascript:void(0)">www.your-company.com</a></p>
</div>

CSS:

.name .company_name {
    display: none;
}
.name:hover .company_name {
    display: block;
    float: right;
}
Discussion courtesy of: matewka

This recipe can be found in it's original form on Stack Over Flow.