Image inside a rotating image - html

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:
Spinning border and envelope icon overlap and align together.
Image pair is centered horizontally.
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

Answer 2

This will do it:
Wrap the images in an inline-block div.
Remove the inline-block style from both images.
Make the first image position:absolute, which will impose it onto the second image.
Leave the second image's style alone, the img element defaults to display:inline which is what we want.
See my update to your fiddle
http://jsfiddle.net/T8Pjh/17/
<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;position:relative;">
<div style=display:inline-block;>
<img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png" style="position:absolute;" />
<img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
</div>
</div>