html - 如何将两个图像对齐到彼此之上

Question

我试图将两个图像放在彼此之上，然后在悬停时在它们之间淡入淡出...但是我无法正确对齐它们。我如何最好地做到这一点？这很困难，因为我已经将第一张图片居中并且它在一个单元格内...... 我正在尝试对齐 box1 中的那些

.logo1 {
background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/ACE-white_pcfefd.png");
    width: 400px;
    height: 100%;
    background-size:contain;
    background-repeat: no-repeat;
     margin: 0 auto;
    padding: 10px;
    position: relative;
    opacity: 1;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}
    .logo1bg {
        background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
        background-repeat: no-repeat;
        width: 400px;
        height: 100%;
        margin: 0 auto;
        padding: 10px;
        position: absoulte;
        top: 0;
        left: 0;
    }

Codepen 将在这方面提供很大帮助。 http://codepen.io/pisoj1/pen/dOgjmJ

另外我有一个请求，如果有人知道如何在看笔时快速做到这一点...当它响应时，box1 目前是放在堆栈顶部的顶部中间框...我想要 box5现在而不是 box1 做那件事，有什么建议吗？谢谢

Answer 1

您可以删除第二个 div 并将更改 .logo1 的背景图像放在悬停上

.box1:hover .logo1 {
  background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
  -webkit-transition: all 1000ms ease-in-out;
  -moz-transition: all 1000ms ease-in-out;
  -o-transition: all 1000ms ease-in-out;
  transition: all 1000ms ease-in-out;
}

http://codepen.io/anon/pen/WoaKLe