Image inside a rotating image

Question

I have two images:one is supposed to be like a border and it would rotate on hover,the other one is supposed to be inside the first image that rotates.How can i put the second image inside the first?Here is my code and jsfiddle...

<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;">              
    <img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png"  style="display:inline-block;"/>         
    <img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png"  style="display:inline-block;"/>          
</div>

My css...

 .rotate{
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
} 

JSFIDDLE

Answer 1

I had to use a couple of nested elements to achieve all three goals:

1. Spinning border and envelope icon overlap and align together.
2. Image pair is centered horizontally.
3. Image pair size is responsive.

Explanation

The element div.image_wrap is a centered child of div.container that provides a container for both images. It's width is 100% of div.container, but no more than 42px (the width of your images).

The element div.image_height_prop gives div.image_wrap (and therefore div.container) height. Since the images inside are positioned absolutely (so that they overlap), they have no height and will not prop open their container. div.image_height_prop has padding-top set to 100% of its parents width, essentially making a responsive square strut.

The images are positioned absolutely on top of one another, with the "border" last in the DOM so that it will be on top of the stacking order (for hover).

HTML

<div class="col-xs-4 container">
    <div class="image_wrap">
        <div class="image_height_prop">            
            <img class="icon" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
            <img class="rotate" src="http://s27.postimg.org/x4d8qxe73/square.png" />
        </div>
    </div>
</div>

CSS

div.container {
    text-align:center;
    background:black;
    margin-top:20px;
}
div.image_wrap {    
    display:inline-block;
    max-width:42px;
    width:100%;
}
div.image_height_prop {
    position:relative;    
    width:100%;
    padding-top:100%;
    height:0;
}
div.image_wrap img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

img.rotate {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
img.rotate:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Working Example

As mentioned by @chiliNUT, the box in the "border" image is off-center. I centered the image and and re-uploaded it. As an alternative, you could add a 1px left margin to the "envelope" image to adjust for the box being off-center.

img.rotate {
    margin-left:1px;
}

An example of that