Question

Bootstrap 3响应式布局，我试图将悬停效果图像实现到另一个。

<div id="sliderimages" class="container-fluid">         
  <div class="container" id="imageSlider">
    <img class="normal img-responsive" src="images/img_03.jpg">
    <img class="hover img-responsive" src="images/img_03-3.jpg">
  </div>
</div>

以下是我在文件中使用的css代码。

#sliderimages{
background-image: url(../images/wood-4.jpg);
height: auto;
}

#sliderimages img.normal, #sliderimages:hover img.hover
{

    opacity: 1;
    transition: opacity 2s ease-out;
    -moz-transition: opacity 2s ease-out;
    -webkit-transition: opacity 2s ease-out;
    -o-transition: opacity 2s ease-out;
    display: inline-block;
}

#sliderimages img.hover, #sliderimages:hover img.normal
{
    opacity: 0;
    transition: opacity 2s ease-out;
    -moz-transition: opacity 2s ease-out;
    -webkit-transition: opacity 2s ease-out;
    -o-transition: opacity 2s ease-out;
    display: inline-block;
}

代码可以实现悬停效果。但是，我无法将图像放在彼此之上。如果我在悬停图片上使用position:absolute;，它会开始替换。我知道通过将高度设置为integer而不是auto，我可以将图像叠加在一起。但这剥夺了不同设备上的图像响应能力。

有人提供一些帮助吗？

Bootstrap 3图像悬停在另一个图像上

0 个答案: