Question

我有两个图像：一个应该像边框一样，它会在悬停时旋转，另一个应该在旋转的第一个图像内。如何将第二个图像放在第一个图像中？这是我的代码和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>

我的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

我不得不使用几个嵌套元素来实现所有三个目标：

旋转边框和信封图标重叠并对齐。
图像对水平居中。
图像对大小有响应。

<强>解释

元素div.image_wrap是div.container的居中子元素，它为两个图像提供容器。它的宽度是div.container的100％，但不超过42像素（图像的宽度）。

元素div.image_height_prop提供div.image_wrap（因此div.container）高度。由于里面的图像是绝对定位的（因此它们重叠），它们没有高度，也不会支撑打开它们的容器。 div.image_height_prop将padding-top设置为其父级宽度的100％，实际上是一个响应式方形支柱。

图像绝对位于彼此的顶部，边框为＆＃34;最后在DOM中，它将位于堆叠顺序之上（悬停）。

<强> 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

正如@chiliNUT所提到的那样，＆＃34; border＆＃34;图像偏离中心。我将图像置于中心并重新上传。作为替代方案，您可以向＆＃34;信封＆＃34;添加1px左边距。用于调整盒子偏离中心的图像。

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

An example of that

Answer 2

这样做：

将图像包裹在inline-block div中。从两个图像中删除inline-block样式。制作第一张图片position:absolute，将其强加到第二张图片上。保留第二个图像的样式，img元素默认显示：内联这是我们想要的。

查看我对你小提琴的更新 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>

旋转图像内的图像

2 个答案: