CSS Bulky Hover Transitions - html

Question

I have a website, on it, links that container img tags will transition the opacity for the image tag to be less than 100%. This seems to work well with all images except for one and it only happens on ONE page. At the bottom of this page http://www.saerdesigns.com/ there is a VetPros imag, when I hover over it on Chrome (unsure of other browsers), the transition stops and starts and ultimately looks very bulky. It doesn't appear to do this with any other images on the same page, and also, the image in this page using the same stylesheet file appears to work fine http://www.saerdesigns.com/jobs.
Here is my relevant CSS:
a {
text-decoration: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
&:hover, &:active, &:link {
text-decoration: none;
}
}
a {
img {
#extend a;
&:hover {
opacity: 0.8;
}
}
}
And here is the HTML code (it might look weird, but that's because I am using Angular):
<section class="container-fluid buffer" id="scroll-send-3">
<div class="center-block text-center" ng-show="jobs[0]">
<div class="row">
<div ng-repeat="job in jobs" class="col-md-4 job">
<a ui-sref="^.jobs.show({id: job.id})">
<img class="img-responsive center-block" alt="{{job.company}}" ng-src="{{job.image_small}}"/>
</a>
<ul>
<li>{{job.title}}</li>
</ul>
</div>
</div>
<div class="btn-group">
<a class="btn btn-default btn-lg" ui-sref="^.jobs">Work history</a>
</div>
</div>
</section>
How can I prevent this from happening? And why is this happening?
Thanks so much!

Answer 1

~The :hover works fine if you add position: relative;.
Maybe better to add transform: translate3d(0, 0, 1px); instead. I think the issue is because you are using opacity.
I don't have the explanation at hand right now, would have to go digging. Maybe tomorrow I can find the explanation again.