如何响应合并绝对定位图像？

Question

以下是我的代码。 1.png默认显示。我希望在用户鼠标悬停在1.png上时显示2.png和3.png合并，并带有一些幻灯片效果。

我用javascript做了同样的事情。它以某种方式工作。但我想用css而不是js。它简短而简单。我猜css可以在uc mini和speed模式下工作。但是js没有用。

如何达到预期效果？

<style>
    .relative_wrapper {
        position: relative;
        overflow: hidden;
    }

    .container {
        position: relative;
    }

    .slider_1 {
        position: absolute;     
        overflow: hidden;
        transform: translate(-50%,0%);
        left: 50%;
        top: 0;
        padding: 0;
        margin: 0;
    }

    .slider_1 img, .slider_2 img {      
        padding: 0;
        margin: 0;
        max-width: 100%;
        height: auto;
    }

    .slider_2 {
        position: absolute;     
        overflow: hidden;
        transform: translate(-50%, 0%);
        left: 50%;
        bottom: 0%;
    }
    </style>

<div id="relative_wrapper">
                <div class="container">
                    <img src="1.png" class="img-responsive center-block">
                    <div class="slider_1">
                        <img src="2.png" class="slider">
                    </div>
                    <div class="slider_2">
                        <img src="3.png" class="slider">
                    </div>
                </div>
            </div>