Adding a title to the large image on a gallery

HTML-CSS
1

Hi all,

I have a problem that I am sure there is a simple answer to. I am creating an image galley that has thumbnails and when clicked on a large image appears. I have worked out how to add a title to the thumbnails but am at a loss how to put one on the large image

This is the code I have

<div id="gallery"> 
		<a href="img/largeimage.jpg" title="nice pic"><img src="img/thumbnail.jpg" width="70" height="70" alt="Shop photo 1"></a>

with CSS

> #gallery {
> float: left;
> width: 90px;
> margin-right: 30px;
> margin-left: 10px;
> border-right: white 1px dotted;	
> }
> #gallery img {
> display: inline-block;
> margin: 0 0 10px 0;
> border: 1px solid rgb(0,0,0);
> }

all help greatly appreciated

2

Hi there and welcome to the forum!

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

So we can’t see your image, can you share Codepen or something with your code?

1 Like
3

Hi @sterlingdp

The anchor element is directly accessing the image file.

One way to add the title attribute to the larger version of the image is to create a separate file for it.

For instance, create an html page which only contains an img element with the appropriate attributes for the large version of the image.

In the gallery, point the href attribute to the new HTML file.

Happy coding

1 Like