Okay.
First of all, I implemented the overlay effect using z-index and absolute positioning. The first alternative method you listed generated a “bouncing” effect on Opera browser. At smallest, the hover state would display a size greater than the img:first-of-type, thereby “bouncing” the layout size. It’s hard to demonstrate without videos / photos. The second one involving absolute positioning (relative to .imgbox) has no issues. The third one involving the hover image in the background works at all sizes, too, but I stuck with the second method, i.e.:
.imgbox {
min-height:100px;
position:relative;
text-align:center;
}
.imgbox img {
display:block;
width:100%;
height:auto;
}
.imgbox img:last-of-type {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
z-index:-1;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
z-index:1;
}
I’m not really having a full understanding why image box has a minimum height and why the image itself a width of 100%, but that’s for me to experiment and figure out why.
Moving on to the “blink” of the hover state image, you wrote the following:
…so I went and searched how to preload an image, and I came up with the following code to add within the <head> tag:
<link rel="prefetch" href="style/headerlogo2.png">
I will do a bit more research to see if there is more to this prefetch to make it effective (like some JS); however, I do not see the blink between the images shifting anymore on two different browsers. I think it’s complete across all types of devices after testing it on a few different computers, and honestly, if the images don’t shift to the hover state on all types of devices, I’m not very concerned about it as the effect is cosmetic and mainly for glamor.
I read all of that thread that you linked, but I didn’t quite understand its application to the problem at hand. Perhaps, I haven’t tested enough touch screen devices, but the ones I have (including my phone) are all responsive between the image states. Was I supposed to be paying attention to the JavaScript bits? Not sure what you wanted me to see there, but it was informative. I have come to like reading the discussions.
Every time I respond or update, I have always uploaded the most recent files to the test site, so I might forego the “files updated” bit.
Is there really anything else before I move on to the content body? I think I’m going to have some new files and code uploaded to the test site by sometime tomorrow.
‘award-winning’ IE11:
for me to continue to play with the content body designs and implement some test code on this Tuesday, but I aim to spend a bit of time in the beginning of the day tomorrow to see what I can come up with. I guess I’ll continue the discussion here, or I can make a new thread targeting whatever roadblocks I might come up against.
:
,
?
I get discouraged when I fail to do something as simple as displaying my background images properly. I’ll figure it out. 
as I dream of the following:
) should tell the story. While I doutbt they are necessary, there is no harm in including them before you list the un-prefixed property. (The un-prefixed property should be the last of the group listed.)
It does look a tad better like this, though.