Hi there jackmoskovita i like your approach and style, my only thing what would i suggest is to use flexbox or even more css grid if you have not used, plus a little bit css transition which is not that hard only one line of code and you can make when you hover the images a cursor pointer and larger images.
That is my recommendation out of your topic, but I like your work
Thanks
There is no need for those as the example works fine as it is (and almost everywhere). 
To be honest though I would also generally say to use flexbox but in this case we are dealing with fixed sizes so there is no need to flex anything and indeed flex would make this slightly more awkward if you didn’t know what you were doing. Grid could also be used but there’s no need to grab the latest and greatest property in the toolbox when existing tools do the job nicely.
However if modern browsers support only is needed then you can mostly avoid inline-block and use flex instead (or use inline-block as a fallback).
Those were added to my example
Where do you place the JS at? In Header or in Main?
Also, do I put that code inside script tags?
I also noticed that the main large photo at the top now has a black border?
No the JS should go in a script tag at the bottom of the html before the closing body tag (or in an external referenced script at the same place).
e.g.
<script>
//the script goes here
</script>
<!-- Just before the closing body tag of your page -->
</body>
</html>
Note that I added a new id t the mast for easy reference although I guess you should really be copying al the html as I tidied it up.
Yes as mentioned above. Codepen has special panels so you don;t need to add the script or style tags when you place code in the correct pane. Also in codepen you generally only include code that is inside the body of the html and put head stuff in the settings tab if needed (but generally you don’t need head stuff for a codepen demo except to links to necessary external files).
Yes I was playing around with that as I felt it looked better when you had a smaller image showing and there were gaps at the side. As you have not kept all your images to the same aspect ratio the image size would change but I used object-fit:contain on the image to keep it within the initial large image size. That means that tall images will be constrained to the height available and their width will be reduced according to their aspect ratio.
Firstly I used object-fit:cover which made the image cover the whole area but that would result in some cropping and indeed some of your bird pictures would lose their heads Therefore I felt it better to contain the image within the available space but to have the black background behind. In my opinion this looked much better but of course you can just remove the border and background if you don’t like it.
Here’s an example of what I mean.
Hmm just noticed you are squashing some of those thumbnails also! Look at the small picture of the snowy owl.
Thanks for posting the last CodePen. 
Looking at it I think there is one place where flexbox would be a better option. 
The topic tabs uses text-align to center and line-height to middle the tab texts, which doesn’t coop with line breaks…
They could use flexbox instead and get both center and middle alignment also with line breaks.
Apply flexbox to align the tab texts in this “span.set” rule:
.photo ul.topic li span.set {
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
line-height: 1;
height: 30px;
font-weight: 900;
color: #000;
border: solid #fff;
border-width: 1px 1px 0 0;
background: #ccc;
font-family: verdana, arial, sans-serif;
padding: 0 2px;
position: absolute;
top: -31px;
width: 20%;
box-sizing: border-box;
}
.photo ul.topic li span.set br {
display: none;
}
Then the “span.set” ruleblock to change line-height could be removed in the media rule:
@media screen and (max-width: 980px) {
.photo ul.topic li span.set br {
display: block;
}
}
I thought the lack of vertical alignment with the line breaking tabs was a bit annoying but didn’t realize how easy it was to fix until I read the flexbox reminder above.
Hi erikfox87, welcome to the forum!
Thanks for reminding of flexbox.
I agree with Paul here but never the less I found a use for it regarding the tab texts horizontal and vertical center alignment.
So Paul what am I doing wrong here as I’m not getting any of the pics in the gallery to show in the large photo at the top when I click on them?
https://moskovita-photography.com/Jack-Moskovita-Photography_Test.htm
Hi there jjackmoskovita,
you have messed up your javascript. 
At present you have this…
Resources
<script>
< allImages.length; i++) {
allImages[i].addEventListener("click", function (e) {
mastImage.classList.remove("blur");
void mastImage.offsetWidth; //trigger reflow to start keyframe
mastImage.classList.add("blur");
mastImage.src = allImages[i].src;
mastImage.setAttribute("alt", allImages[i].getAttribute("alt"));
e.preventDefault();
});
}
})(document);
</script>
…when it should be this…
<script>
(function (d) {
"use strict";
const allImages = d.querySelectorAll("[data-alt] img");
const mastImage = d.querySelector("#mastImage");
for (let i = 0; i < allImages.length; i++) {
allImages[i].addEventListener("click", function (e) {
mastImage.classList.remove("blur");
void mastImage.offsetWidth; //trigger reflow to start keyframe
mastImage.classList.add("blur");
mastImage.src = allImages[i].src;
mastImage.setAttribute("alt", allImages[i].getAttribute("alt"));
e.preventDefault();
});
}
})(document);
coothead
Just added what you said to… still not working?
No, the page you link to has still the faulty script exactly as @coothead posted.
The < letter indicates there is an error in the copy-paste of the script to the page.
Correct copied it works flawlessly.
Ah yes! It works now! Great!
Never mind, I was copying and pasting wrong again. Sorry!
Hi, I’m busy off line for some days to come so I post the page I’ve tested some alternative styling on while I can.
Jack+Moskovita+Photography_PaulOB+Alt-fix+Tab-text.html (22.0 KB)
Hopefully you can use some of it, anyway I had some fun playing with it.
I’ll look at it later, but whether I use it or not, I always enjoy learning something.
Thanks for your efforts.
The Website is looking really good. A couple areas of improvement I have in mind, but don’t know how to implement them, one is I find it irritating when I place the mouse cursor over like say the tab, “Bald Eagles” if I move the cursor wrong, it jumps back to the “active” Mountain & Lakes tab. I get complaints about that but don’t know how to fix it? How do I get it to stay on “Bald Eagles” no matter where the mouse cursor is?
https://moskovita-photography.com/
What you mean is how do you get it to stay on “Bald Eagles” unless you hover over any of the other top row tabs.
This can only be done in JS if you are talking about a hover activating the tab and keeping it constant until another top tab is hovered. The usual method is to add a class (using JS) to the tab when you hover over it and use that class to keep the submenu open (much in the same way that the hover rules keep the menu open. Indeed you would use the same code and just add an active class into the mix). When the user hovers another tab then you take off the class from the previous tab and apply it to the newly hovered tab, The CSS takes care of the rest
I’ll try and knock up a demo this afternoon to show the method. As this is an enhancement then JS is perfect for this as the menu still works without JS.
Here’s the revised JS to allow for the active tab to stay ‘alive’ even if you move the mouse outside.
(function (d) {
"use strict";
const allImages = d.querySelectorAll("[data-alt] img");
const mastImage = d.querySelector("#mastImage");
for (let i = 0; i < allImages.length; i++) {
allImages[i].addEventListener("click", function (e) {
mastImage.classList.remove("blur");
void mastImage.offsetWidth; //trigger reflow to start keyframe
mastImage.classList.add("blur");
mastImage.src = allImages[i].src;
mastImage.setAttribute("alt", allImages[i].getAttribute("alt"));
e.preventDefault();
});
}
// add tab hover code
const topTabs = d.querySelectorAll(".topic > li");
for (let j = 0; j < topTabs.length; j++) {
topTabs[j].addEventListener("mouseover", function (e) {
removeActiveTab();
topTabs[j].classList.add("active");
});
}
function removeActiveTab() {
for (let k = 0; k < topTabs.length; k++) {
topTabs[k].classList.remove("active");
}
}
})(document);
You already have an active class so the CSS doesn’t need to change.
I updated the previous demo to show it in action.
I also added ‘some’ of Erik’s suggestion on flexbox
Just for fun I changed the thumbnails to horizontal scrolling for small screen as it was impossible to use on a mobile as you had to scroll all the way down the page and then all the way back up to see the image.
It will look like this on small screens .
Okay, what am I doing wrong? I copied the script and replaced the one currently at the bottom of webpage right above body></html
Nothing changed?
If this works I’m thinking making a separate page of this and of adding a button on main index page saying something like this “For CELL Phones”.
I was testing the above script here:
https://moskovita-photography.com/Jack-Moskovita-Photography_Test.htm
The css was also changed so you need to copy that as well. 
You don’t need to add a button for small screens as they will get the display automatically due to the media queries. That’s what responsive design is about
Offline now until tomorrow
I have a question? On my Galaxy 9 plus, wife’s iPhone 8+ and uncles iPhone 6+, we’re all getting a black shadow/cloud on the right side of the screen?
