helping in transition effect by CSS3 or JS or jquery

I want to change the background-image of this picture while moving to another one on my images folder like this example that's my code

CSS

.image {

    position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);

}
.image:hover {

        opacity:0;
filter:alpha(opacity=0);
    -moz-transform:  scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    -webkit-transform:   scale(1.00) rotate(0d开发者_运维技巧eg) translate(0px, 100px) skew(0deg, 0deg);
    transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
    background-color:#36F;

    }

HTML

<div id="image_holder_1" class="image_holder">
    <img id="image_1" class="image" src="images/esu.gif" />
</div>

---

jQuery.cycle is your answer.

<script type="text/javascript">

    $(document).ready(function() {
        $('.image_holder').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>

You should remove the "image" id and image elements should be contained inside your "image_holder" that contain links to the images you want to cycle (transition) through. Your html will then look something like this:

<div id="image_holder_1" class="image_holder">
         <img src="images/esu.gif"/>
         <!-- Your other image source(s) goes here -->
</div>

If your image transition worked the way that you liked with your css, use the css for the transition and omit the transition type in the jQuery. Here is a link to the different transitions that may be useful to you by using jQuery.cycle. jQuery.cycle transitions

---

The effect in your example would not be achievable in CSS, transition animations cannot be cancelled, so each animation would have to complete for both the mouse over and mouse out events in the CSS.