Something roughly like this:
4 Likes
PaulOB
Where do I place that in my header in my gallery 3?
https://moskovita-photography.com/New_Website-gallery-3.htm
AND do I get rid of all title attributes before putting that code in?
The semantics would need to be investigated further but the mechanics would go like this 
Add This css after the original CSS.
.image-hover:before {
position: absolute;
content: attr(title);
opacity: 0;
top: 0;
left: 0;
right: 0;
width: 110px;
text-align: center;
overflow: auto;
transform: translateY(0);
opacity: 0;
border: 1px solid #000;
border-radius: 20px 20px 0 0;
z-index: -1;
}
.image-hover:focus:before,
.image-hover:hover:before {
top: -32px;
left: -50px;
right: -50px;
width: auto;
background: #666;
color: #fff;
padding: 5px 3px;
transform: translateY(-100%);
opacity: 0.8;
z-index: 99;
transition: 0.5s ease;
}
Then move the title attribute from the image and on to the anchor (leave the alt attribute on the image). Also add a class to the anchor to allow easier targeting.
e.g.
Here is one item in the correct format.
<li><a class="image-hover" title="Tacoma Dome and Mt Rainier" href="JulyTacomaMoon3-800.jpg"><img src="JulyTacomaMoon3-800.jpg" alt="Tacoma Dome"></a></li>
With that code added the result is this.
2 Likes
Once again Paul, thanks a bunch! I’ll will be trying this later today.
1 Like
That’s me, posting without thinking. 
What took you so long? 
I suggest using a data attribute on the anchor for the image description and show that as a CSS tool-tip. And remove all title attributes on those images and anchors.
I would suggest to simply copy-paste the alt="Image description" on the image to the anchor and rename it to data-alt="Image description"
<li><a href="April16-3-800.jpg" data-alt="Bald Eagles landing on branches""><img src="double-landing-nesting-eagles-1200.jpg" alt="Bald Eagles landing on branches" /></a></li>
<li><a href="May10-BaldEagle6-web.jpg" data-alt="Bald Eagle flight at Point Defiance, Tacoma"><img src="May10-BaldEagle6-web.jpg" alt="Bald Eagle flight at Point Defiance, Tacoma" /></a></li>
Then place this CSS where Paul told you:
a[data-alt]:focus::before,
a[data-alt]:hover::before{
position:absolute;
z-index:1;
left:-32px;
bottom:110px;
border:1px solid #000;
border-radius:5px;
padding:4px 6px;
background:#ffc;
color:#000;
text-align:left;
font:message-box;
line-height:1;
width:160px;
content:attr(data-alt);
}
Having a title on the anchor or on the image would not be useful here IMHO. As I said earlier:
The CSS tool-tip is instant compared with the title attribut that is delayed and often not show because the mouse moved.
and:
What you can’t do is hinder the title to show too (but delayed) if the title attribute is [present and] not empty.
3 Likes
With the code in my last post above the result is this, if you like:
3 Likes
Yes that would take care of semantics in not having unnecessary titles all over the place
4 Likes
And also gives a natural way to select only those anchors that have the data attribute. 
2 Likes
Ah… I tested it on one image in gallery three
https://moskovita-photography.com/New_Website-gallery-3.htm
Tested in first image on “active” in Mt Rainier tab. Looks real nice, clean, I like it.
Eliminated the title text too. Now the question, this would mean I’d have to change all 315 photos in 3 galleries by hand 
Anyway there is a faster way to do this? Do you guys have “tools” you use so you don’t have to do everything by hand?
And for another question that’s bugging me.
I first started this with this website coding, before I changed everything suggested here:
http://www.cssplay.co.uk/menu/lightbox.html
I notice that when I click on like say the Mt Rainier tab, at the end of the url has
“#Mt%20Rainier” attached? Is that trying to go somewhere like a webpage with just those Mt Rainier images? Is this something else that can be added or eliminated?
That’s because the topic tabs are anchors with a fragment url as target. That was necessary at the time to accomodate to MS IE<7 that could only hover on anchors that were links.
Those anchors can be completely replaced with spans for all later browsers.
I got lost there…
1 Like
I’m afraid so. 
I suggest selecting with mouse and copy/move while holding the Ctrl key.
I think there are little to save if you would use regular expressions to select complete attributes with content. Too complex operation IMHO.
Don’t despair! 
I began taking time to copy/paste the alt attributes to encourage.
Time flew and suddenly it was done, I think ten minutes to remove all titles and in a few places add pieces to the alt text.
Then about 25 minutes to copy/move the alt attributes to the anchors and rename them to “data-alt”.
Some five minutes to replace the topic anchors with spans.
Additional ten minutes to change the styles to work with the html changes.
The CSS tool-tip style was added and the style sheet (tag) was somewhat reorganized to reorder the rule-blocks in a more logical way.
Hopefully the page I used was one of your current pages so you might be able to use it as it is.
Jack-Moskovita-Photography_PaulOB+Alt.html (20.6 KB)
When I add the time amounts I see I exaggerated the time spent.
1 Like
Just got in from work and looking this over before going to bed.
That looks really good and I’ll never be as fast as you guys!
https://moskovita-photography.com/Jack-Moskovita-Photography_PaulOB+Alt.html
I won’t be doing anything till Monday now as I’m going down to Oregon to visit my 94 year old Mom that they wouldn’t let me see the past 6 months due to the Coronavirus Isolations/shutdowns etc.
As it is, my wife and I will only be able to see/talk to Mom through a window…
3 Likes
I took Erik’s code (and tidied a few bits in the html up such as trailing slashes ) and have put it online in codepen here.
I also added a small snippet of JS so that when you click the little image they swap out the big image at the top for the one that you just clicked rather than going to another page and then having to press the back button to get back.
Of course the thumbnails should really be low quality thumbnails of about 2k each and then you swap the image source for the better quality image when you display it larger. This would avoid the long loading time for your hundreds of images but is of course a task for another day (or maybe weeks as you’d have to create hundreds of thumbnails unless you are able to automate the process).
2 Likes
Very nice! 
And the Javascript is really enhancing the user experience! Users will love it! 
One small quirk I didn’t think of; when I text zoom the computed line-height varies, so the topic span should have height:30px; added to keep the height steady in different text sizes.
Comes to mind three very powerful and free viewers/converters that can automate most tasks and have parts/plugins for all sorts of tasks. They have been top noch for many years.
Irfanview for Windows is free for non commercial use: https://www.irfanview.com/
XnView Classic for Windows is free for all uses: https://www.xnview.com/en/xnview/
XnView MP for cross platform is also free for all uses: https://www.xnview.com/en/xnviewmp/
2 Likes
Wow, you guys are great… I gotta move to Australia!
I am heading to Oregon now to see my 94 year old mom will implement this great stuff when I get back home on Monday… C’ya all then.
2 Likes
Off Topic
The community here is from all over the world. Even the volunteer staff are mostly not Australian. 
Have a safe journey.
4 Likes
I’m still in Oregon… couldn’t sleep (almost 3am here) so snuck on here.
I didn’t mean to offend anyone, but I got the Australia bit here:
SitePoint HQ is just off Brunswick St, Fitzroy, a quick tram ride ride north of Melbourne’s CBD
3 Likes
You haven’t offended me - or anyone else, I would imagine. I just didn’t want you emigrating to Australia and then finding you should have gone to Europe instead! 
Yes, SitePoint is an Australian company, but the forums are an international community, with volunteer staff drawn from all over the world.
2 Likes