How can you display an image with text on hover in a simple way?

Question

How can you display an image with text on hover in a simple way?

Is there a way to display an image (a company logo sized at 150 x 100 px) when a user hovers over the company name? The image should appear on the right side of the name.

I am uncertain whether this can be achieved with CSS3 alone or if I would need to use jQuery, which is not my preferred option.

Do you have any suggestions or ideas for how to accomplish this?

This is my HTML structure:

<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>

jquery css

Answer 1

Answer №1

Using CSS3 makes it simple to achieve this effect:

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

Please remember that the image path is relative to the CSS file location.

This basic solution results in the image floating next to the company name on the right side. If you desire a more intricate design, let me know.

However, if compatibility with IE7 and earlier versions is necessary, you can include the image in the markup as shown below and apply similar styling for hover:

HTML:

<div class="supplier_box_top">
    <p class="name">
        <img class="company_image" src="my_company_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;
}

Answer 2

Using CSS3 makes it simple to achieve this effect:

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

Please remember that the image path is relative to the CSS file location.

This basic solution results in the image floating next to the company name on the right side. If you desire a more intricate design, let me know.

However, if compatibility with IE7 and earlier versions is necessary, you can include the image in the markup as shown below and apply similar styling for hover:

HTML:

<div class="supplier_box_top">
    <p class="name">
        <img class="company_image" src="my_company_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;
}

Answer 3

Answer №2

If you want the <img> to appear after the Company Name .name, consider using adjacent a + b or general a ~ b sibling selectors to show the image:

img.logo {
   display: none;
}

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

Alternatively, you can place the image within the same paragraph and implement the following method:

<p class="name">Company Name <img src="" /></p>

.name {
   position: relative;
}

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

.name:hover img {
    display: inline;
}

Answer 4

If you want the <img> to appear after the Company Name .name, consider using adjacent a + b or general a ~ b sibling selectors to show the image:

img.logo {
   display: none;
}

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

Alternatively, you can place the image within the same paragraph and implement the following method:

<p class="name">Company Name <img src="" /></p>

.name {
   position: relative;
}

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

.name:hover img {
    display: inline;
}

How can you display an image with text on hover in a simple way?

Answer №1

Answer №2

Similar questions

Trigger the next button click event using jQuery

Updating Tailwind CSS to accommodate older web browsers by converting modern rgba() notation to be browser-compatible

Utilize the hexadecimal color code as a string within the darken function

The <Button> element is incompatible with popups. (HTML, CSS, JS)

Rearranging Twitter Bootstrap Grid Columns

Significant delay in processing second jQuery Ajax call

Keep a stack to hold the content within the div element

Creating a Full Height Background Image with a Responsive Width Using Jquery

The Limits of JavaScript Tables

steps to overlay an image over another in bootstrap:

Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

Modifying<strong>superscript</strong> design

How to Make Your Site/Content Fade In with jQuery Upon Loading?

Tips on creating a clickable drop-zone using jQuery

"Utilizing Twitter Bootstrap to create full-width input fields with pre

Using the Greasemonkey browser extension, one can employ the waitForKeyElements utility to trigger a function once a designated element becomes visible on the webpage

I am having trouble modifying the content of a div using Jquery append

Is it possible to fill dropdown menus on a webpage using jQuery or JavaScript without the need for an ajax call?

Achieving Right Alignment of SVG Next to an <h4> in Bootstrap 5

Is it possible to customize the appearance of HTML input fields pre-populated by the browser