In the 5 x 5 matrix you mention there are 6 sets of 4 images that should connect in hover. what I can’t decide is how the pattern of the 6 groups are made.
Here is an example of one of numerous patterns with the sets A-F that meets your criteria:
A B C D A
D E F E B
C F X F C
B E F E D
A D C B A
Just being curious on what you’re trying to achieve would look like. I find it interesting. 
N.B. You don’t need to answer if you don’t want to and I wont waste more time on this.
If you connect-the-dot the same letters to each other, you’ll see squares at different angles.
So whenever you hover over any of the images, all 4 of the same image will slightly enlarge. On the back is an opening off-center, slightly off-center from all the other inserts. The one in the middle has the hole dead center. So they all put the hole in different positions depends on which insert is used and which way they are turned.
Thanks for the info. I don’t get what the off-center opening is. I my example the pivot point of all squares are centered but there could also be rectilinear squares with an off-center middle point.
Aren’t we lucky Javascript exists and that geniuses like @Paul_Wilkins hang here! 
I wish you good luck and looking forward to your next topic from this project in the Javascript forum (where I have noob knowledge).
The C and D inserts line up with each other in pairs. They go into openings in their own fixed mount, about 2" apart. The holes face each other. Each insert can be in 1 of 25 positions, and they can be different per mount.
A 1/8" dia. pin is inserted into the holes. Depending on which way the inserts are inserted, the pin changes direction up/down and left/right. So the paired inserts determine the angle of the pin. If both inserts are center/center, then they will be straight down the middle, for instance.
Something will pivot off the pin. So it’s a setup adjustment.
Exiting, though I can’t imagine what kind of product you talk about. 
Nevertheless, I’m happy to read about it, future will tell what it is I hope! 
It’s not a secret. Download the manual and go to pages 8 and 9 to see it in action.
Hi there WebSteve,
does this example help…
https://codepen.io/coothead/full/VwvMwKN
…and this is the code used…
https://codepen.io/coothead/pen/VwvMwKN
coothead
That works in Codepen! Will try it on my page next. Wow!
I’ll bet you had fun building that one.
Well, I was 2¼ hours late going
out for my daily 6½ mile walk. 
coothead
Excellent demo 
Why is it we can combine scale and rotate, but not add opacity to the .transformX classes?
Opacity is not a valid value for the transform property. Opacity is a property that has its own values.
It’s like trying to add height to a width property.
Just add opacity int it’s own rule.
opacity: 0.5;
Scale and rotate are values for the transform property and so is translate.
It’s similar to applying background-color values and urls to the background property.
I was putting it in the top transform group instead of the bottom grouping that changes on hover. Now it works!
Hi there WebSteve,
go back to the links in post #27
to see opacity amendments. 
coothead
Amazing!
But all I needed to do was put opacity: 0.5; in the .transform4-7 to get what I wanted. Thanks!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.