Images floated side by side don't display correct images

I’m trying to float images side by side and having a hard time getting it right.

I’m using WP-Types to create an active and rollover image, then pluging the [himage] code into the post content.

<p><a href="#">[himage][types field="dribbble-active" align="none"][/types][types field="dribbble-rollover" align="none"][/types][/himage]</a></p>
<p><a href="#">[himage][types field="twitter-active" align="none"][/types][types field="twitter-rollover" align="none"][/types][/himage]</a></p>
<p><a href="#">[himage][types field="linkedin-active" align="none"][/types][types field="linkedin-rollover" align="none"][/types][/himage]</a></p>

As it stands now only the first image changes to it’s rollover image when I hover, and the others start with their rollover image by default. Also, the first image doesn’t even show up, but is the same exact image as the last image in the code.

CSS

.social {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.icons {
	overflow: hidden;
}

.icons img {
	float: left;
	display: inline-block;
	margin: 0 0.5em 0 0;
}

HTML

<div class="social">
			<div class="caps">
				<div id="wpcf-field-social-heading" class="wpcf-field-textfield wpcf-field-social-heading"><span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-social-heading-value">Lorem Ipsum Bacon</span></div>			</div>

			<div class="icons">
				<p><a href="https://dribbble.com/alexflannery"><style>
.himage
{
	-webkit-transition: opacity .000000001s linear 0s;
	-moz-transition: opacity .000000001s linear 0s;
	-o-transition: opacity .000000001s linear 0s;
	transition: opacity .000000001s linear 0s;
}
</style><div style="position:relative;"><img src="https://localhost/wp-content/uploads/Dribbble_Rollover.png" width="" height="" /><img class="himage" src="https://localhost/wp-content/uploads/Dribbble_Idle.png" width="" height="" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;" /></div></a></p>
<p><a href="https://twitter.com/OhFlannery"><style>
.himage
{
	-webkit-transition: opacity .000000001s linear 0s;
	-moz-transition: opacity .000000001s linear 0s;
	-o-transition: opacity .000000001s linear 0s;
	transition: opacity .000000001s linear 0s;
}
</style><div style="position:relative;"><img src="https://localhost/wp-content/uploads/Twitter_RollOver.png" width="" height="" /><img class="himage" src="https://localhost/wp-content/uploads/Twitter_Idle.png" width="" height="" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;" /></div></a></p>
<p><a href="#"><style>
.himage
{
	-webkit-transition: opacity .000000001s linear 0s;
	-moz-transition: opacity .000000001s linear 0s;
	-o-transition: opacity .000000001s linear 0s;
	transition: opacity .000000001s linear 0s;
}
</style><div style="position:relative;"><img src="https://localhost/wp-content/uploads/LinkedIn_RollOver.png" width="" height="" /><img class="himage" src="https://localhost/wp-content/uploads/LinkedIn_Idle.png" width="" height="" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;" /></div></a></p>
			</div>
		</div> <!-- end .SOCIAL -->