Flip zwischen einem img und Text

Question

Ich versuche Animation so hinzufügen, wenn ich über meine Bilder schweben sie verblassen und andere div mit Text blendet Genau wie auf dieser Seite: http://jack-hughes.com/

Aber ich habe meine Bilder in einem Bootstrap-Container mit Klasse "Col-Md-4" und jedes Mal, wenn eines der Fotos ausblendet, bewegen sich die anderen an ihren Platz.

Wie kann ich etwas genau wie die Beispiel-Website machen?

Dies ist, was ich bisher habe, aber es ist nicht einmal in der Nähe.

$(".box-1").on('mouseover', function() { 
    $(this).fadeToggle(300).addClass('back'); 
}); 

Answer 1

Haben Sie versucht mit hover? Es behandelt sowohl Ihre Maus-Ein- als auch Maus-Out-Ereignisse.

Sie können jedes Bild mit seinem Text in ein umgebendes div einbinden und Ihre Funktion für dieses div verwenden. Wenn Sie für jede Bild/Text-Kombination die gleichen Klassen verwenden, ist Ihre jQuery sehr einfach.

HTML

<div id="about" class="container-fluid"> 
<div class="header"> 
    About 
</div> 
<div class= "row front"> 
    <div class="col-sm-4 about-box-container"> 
    <img class="about-box front box-1" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <div class="about-box back box-1"> 
     text 
    </div> 
    </div> 
    <div class="col-sm-4 about-box-container"> 
    <img class="about-box front box-2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <div class="about-box back box-2"> 
     text 
    </div> 
    </div> 
    <div class="col-sm-4 about-box-container"> 
    <img class="about-box front box-3" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <div class="about-box back box-3"> 
     text 
    </div> 
    </div> 
</div> 

jQuery

$('.about-box-container').hover(
function() { 
    $(this).find('.front').fadeOut(300, function() { 
    $(this).siblings('.back').fadeIn(300); 
    }); 
}, 
function() { 
    $(this).find('.back').fadeOut(300, function() { 
    $(this).siblings('.front').fadeIn(300); 
    }); 
} 

)

Demo here

Answer 2

jQuery Blendeffekte einstellen Elements dis Spielen Sie die Eigenschaft auf "none", und ihr Platz wird für andere Elemente freigegeben. Versuchen Opazität verwenden und : schweben ohne JS (eigentlich das ist, was bei http://jack-hughes.com geschieht):

CSS:

.test { 
    position: relative; 
} 

.test img { 
    width: 100px; 
    height: 100px; 
    border: solid 1px lightgray; 
    padding: 10px; 
} 

.test .test2 { 
    width: 102px; 
    height: 102px; 
    padding: 10px; 
    display: flex; 
    text-align: center; 
    align-items: center; 
    justify-content: center; 
    background: lightgray; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transition: all 0.3s ease-out; 
} 
.test .test2:hover { 
    opacity: 1; 
} 

hier aktualisiert Plunker basierend auf @ Tricky12 HTML: https://plnkr.co/edit/pGYckIcRDPZKS7Ma4vSQ?p=preview