What is most frustrating is that I have a book containing a lot of CSS reference and it seems 90% of it just doesnt work on WordPress.

Highly unlikely that's WordPress-related. What book is it out of curiosity? I'm particularly fond of this book and learned a lot from it when it came out: http://www.cssmastery.com/

This:
transition-property: opacity, 4s, linear;

Should be:
transition-property: opacity;

And this:
opacity, 4s, linear

Should be:
opacity 4s linear

Try updating your example to this:

.wp-caption img {
	transition-property: opacity;
	-o-transition: opacity 4s linear;
	-moz-transition: opacity 4s linear;
	-webkit-transition: opacity 4s linear;
	opacity: .25;
}
.wp-caption img:hover {
	opacity: 1;
}

Remember that this stuff is CSS3, so make sure you're testing with a browser that supports it. http://caniuse.com/#search=transition

From my understanding this should work:

.wp-caption [src$='floweroflife.jpg'] img {
	transition-property: opacity, 4s, linear;
	-o-transition: opacity, 4s, linear;
	-moz-transition: opacity, 4s, linear;
	-webkit-transition: opacity, 4s, linear;
	opacity: .25;
}
.wp-caption:hover {
	opacity: 1;
}

but does not work at all. Breaks the selection of the image which contains floweroflife.jpg. I've also tried coding in the entire URL. No go.

.wp-caption:first-child {
	transition-property: opacity, 4s, linear;
	-o-transition: opacity, 4s, linear;
	-moz-transition: opacity, 4s, linear;
	-webkit-transition: opacity, 4s, linear;
	opacity: .25;
}
.wp-caption:hover {
	opacity: 1;
}

I have the gridspace theme and wanted to customize my layout so that I have four infinitely scrolling images at the very top, replacing the one current image.

That's a pretty freaking awesome tutorial. Here's how you can take the example from http://designshack.net/articles/css/infinitephotobanner/ and use it on your blog"

First, you'll need to add HTML. Add it to a text widget in the sidebar. Here is some example HTML you can use based on the tutorial and using some random images from your header and latest posts:

<div class="photobanner">
	<img class="first" src="http://shit102.files.wordpress.com/2012/11/cropped-cropped-img_6344.jpg" alt="">
	<img src="http://shit102.files.wordpress.com/2012/11/img_7426.jpg" alt="">
	<img src="http://shit102.files.wordpress.com/2012/11/img_0036.jpg" alt="">
</div>

To add more images, you would just add more "img" lines with different image links in them.

After that, copy the following CSS (only slightly modified from the tutorial) into your Appearance → Custom Design → CSS editor and click the Preview button:

.photobanner {
	height: 563px;
	margin-bottom: 80px;
	position: absolute;
	top: 0;
	width: 3550px;
}

/*keyframe animations*/
.photobanner .first {
	-webkit-animation: bannermove 30s linear infinite;
	-moz-animation: bannermove 30s linear infinite;
	-ms-animation: bannermove 30s linear infinite;
	-o-animation: bannermove 30s linear infinite;
	animation: bannermove 30s linear infinite;
}

@keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-moz-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-webkit-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-ms-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-o-keyframes bannermove {
}

100% {
	margin-left: -2125px;
}
}

.photobanner img {
	max-height: 563px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}

.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

That's pushing the edges of what CSS can do these days. Pretty neat! Note that these CSS3 rules will only work in the latest browsers, and in the case of Internet Explorer, the animations and transitions won't work in any version so far except IE10. You can refer to these charts for reference:

* http://caniuse.com/#feat=css-animation
* http://caniuse.com/#feat=transforms2d
* http://caniuse.com/#search=transition

Aside: Everyone has access to the stylesheets. CSS is visible by looking at the links in the header code so there's no need to post entire sets of code in the forums and also anyone that knows how to work with CSS can see them. :)

Read-access to the premium themes forum is now open to all users so you can search to see if your question has been previously asked and answered there. The premium theme forums are at http://premium-themes.forums.wordpress.com/ with separate sections for each theme. http://premium-themes.forums.wordpress.com/forum/gridspace

If you are not successful when searching there is a link for the specific Premium Theme support forum for your theme under Appearance -> Themes in your blog’s Dashboard, but do note that the premium theme must be active and you must be signed in as the user who purchased it in order to see it and post to it.

Theme description: http://theme.wordpress.com/themes/gridspace/
Live demo site: http://gridspacedemo.wordpress.com/

What html should I input and where should I input it under?

Does the Custom Design upgrade let me edit HTML?
No. The Custom Design upgrade allows you to edit fonts and CSS only. You can change the appearance of a theme, but not its HTML markup, PHP code, or content. Read the full section here http://en.support.wordpress.com/custom-design/#frequently-asked-questions

This is the gridspace css sheet legend
* 1. Resets
* 2. Structure
* 3. Fonts
* 4. Header
* 5. Menu
* 6. Content
* 7. Portfolio Grid/List
* 8. Post Formats
* 9. Images & Media
* 10. Forms
* 11. Comments
* 12. Tables
* 13. Sidebar & Widgets
* 14. Footer
* 15. Buttons
* 16. Messages
* 17. Clear Floats
* 18. Icons
* 19. WordPress.com style overrides
* 20. Responsiveness: Tablets
* 21. Responsiveness: Mobile
* 22. Retina Icons

What html should I input and where should I input it under?
I tried using following the instructions to this blog http://designshack.net/articles/css/infinitephotobanner/ but it just scrolls the entire blog content.

http://policyfix.ca/2012/05/15/the-challenges-facing-labour/
There it goes to an incomplete link when you press read more.

Thanks!

Does anyone know how to fix this? I imported my blog through the Blogger import through WordPress.