javascript overlay div with text on images dynamically

Posted on 2011-10-20
Medium Priority
Last Modified: 2012-06-27

I have existing HTML code which shows image thumbnails, I want some JavaScript to overlay a simple div with text (one or two characters).

my page is already consists of inline images as follows;
<a title="this is a title" href="myimage.jpg"><img src="myimage-th.jpg" alt="this is a title" width="150" height="112" /></a>

Open in new window

what is the easiest way to add a div overlay with text to the image, without the need of modifying the HTML source?

I have jQuery available.
Question by:thydzik
  • 5
  • 2
LVL 19

Expert Comment

ID: 37001348
You will need to modify the HTML to add the overlays.

With jquery you only need to show and hide those overlays with .hide() and .show() on mouse over and mouse out events.
LVL 11

Author Comment

ID: 37001428
okay, thanks, but what would be the simplest way of doing this? what html will I need to add?
LVL 11

Author Comment

ID: 37001482
okay, on further reading it looks like I may need to put the images in their own div?

and then build the div overlay in this div as well,

is there an alternative?

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 19

Accepted Solution

Bardobrave earned 1200 total points
ID: 37001687
The simplest way I see this is creating overlays separately by themselves:

<div class="overlay" id="overlay_img1">Text of the overlay</div>

Class overlay by default hides overlays, and on mouse over and on mouse out events on the images you show and hide the divs associated to the images by it's id

<img id="img1" src="whatever" />

$("#img1").mouseIn(function () {
  $("#overlay_" + $(this).attr("id")).show();

$("#img1").mouseOut(function () {
  $("#overlay_" + $(this).attr("id")).hide();
LVL 11

Author Comment

ID: 37001849
I want to know what is the best way to overlay the text on the image?

LVL 17

Assisted Solution

jrm213jrm213 earned 300 total points
ID: 37002548
The bast way to overlay text on an image is to make a div and set the image as the background image of the div. That automatically makes the text on the div overlay the image. You would need to set the correct width and height of the div to get the entire image to display.
LVL 11

Author Comment

ID: 37002666
thanks for the reply.

i have been further playing around with this.
I have found a solution that works okay. basically a div containing the original image and a second div with the text.

so far looks okay, doing all static html at the moment. once happy with the results will try and incorporate it dynamically.
LVL 11

Author Closing Comment

ID: 37004734
awarding points, didn't really help me though as nobody explained how to actually do it.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question