如何將兩個圖像對齊排列

我試圖將兩個圖像放在彼此的頂部，然後在懸停之間淡入淡出......但是我無法正確對齊它們。我該如何做到最好？這是困難的，因爲我已經爲中心的第一形象，這是一個小區內...... 我試圖對準那些在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，有關如何做到這一點的任何建議？謝謝

來源

2016-12-14 yoyo

您可以刪除第二個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

來源

2016-12-14 06:41:36 XYZ

謝謝！這工作得很好，並刪除了很多額外的代碼。 – yoyo

請高興或接受，如果它有幫助 – XYZ

已經完成，只是不公開，直到我有+15 – yoyo

你爲什麼加入background-size: contain;？

我已經修改了它，檢查Codepen

.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9 { 
    width: 400px; 
    height: 100%; 

    background-repeat: no-repeat; 
    margin: 0 auto; 
    padding: 10px; 
    position: absolute; 
    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; 
}

http://codepen.io/anon/pen/RoeBve?editors=1100

來源

2016-12-14 06:43:36 Andy

原本我打算在那裏有一個不同的形象。與徽標無關，所以這就是原因 – yoyo

如何將兩個圖像對齊排列

回答

相關問題