OK, I went a bit overboard on the project. But it looks like way more than it really is. Once I had one container set up the others were easy to replicate and I stumbled on the container translucent effect while trying to find a solution to the font colour problem I had.
I dreamed of being an astronaut as a kid (like most I guess) so I couldn’t leave the story unfinished so I added more. 
Other than not finding a more suitable font colour my problem is the clickable images in each container. Somehow the entire container is clickable and not just the image within the container.
Can someone suggest how I make only the image clickable? Google and stackoverflow haven’t helped.
One suggestion was to make the image “inline-block” but then it goes off centre and I need to to stay in the centre.
That’s odd. It seems alright to me. Only the image is clickable. Have you fixed it?
It might look like the entire container is clickable because the image file is not really round. It is square, so the space around the logo is clickable as well.
I haven’t changed anything.
The top 2 logos are fine. It’s the pictures below, the 5 pictures inside their own containers.
Mostly the 3 slimmer images, the other 2 aren’t as noticeable because the image is almost as wide as the col-xs-6.
The most noticeable example may be the bottom image of the SpaceX rocket.
Ok, I see.
You need to remove the display: block and the margin from the .image-responsive
Instead, create a class for the div itself (I changed it from “col-xs-6” to "col-xs-6 imagelink"
then in the css I added:
.imagelink {
text-align:center;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
that way the margins are not under the link anymore, and the text-align: center will center your image.
(I set the display on the image to ‘inline’, but maybe just removing ‘block’ is enough)
Oh that’s awesome it works great.
Thanks so much for your help.