Wie kann man einen Bildblendeffekt beim Schweben erzielen?

Wie man Fade-Hover-Änderungen an einem Eltern-Div vornehmen kann, wenn wir den Mauszeiger über ein Child-Div bewegen? Ich möchte den Hover einen Fade-Effekt haben und das Hintergrundbild des Eltern-Div ändern. Die Veränderung geschieht sehr schnell. Ich möchte, dass die Veränderung langsam und reibungslos vonstatten geht.Wie kann man einen Bildblendeffekt beim Schweben erzielen?

<script> 
 
\t \t $('#hoverdiv').on('mouseover', function(){ 
 
    $(this).parent().addClass('is-hover'); 
 
}).on('mouseout', function(){ 
 
    $(this).parent().removeClass('is-hover'); 
 
}) 
 
\t </script>

.bground { 
 
    width:100%; 
 
    position:relative; 
 
    background: url(../img/bg1.jpg) no-repeat top center; 
 
} 
 

 
.bground:after { 
 
\t content: url(../img/bg2.jpg); 
 
\t width:0; 
 
\t height:0; 
 
\t display:none; 
 
} 
 

 
.is-hover { 
 
    background: url(../img/bg2.jpg) no-repeat top center; 
 
} 
 

 
#hoverdiv 
 
{ 
 
\t width:auto; 
 
\t height:auto; 
 
\t margin:0 auto; 
 
\t padding:0; 
 
}

<section id="bground" class="bground"> 
 
    <div id="hoverdiv"> 
 
    <div class="display"> 
 
    <img src="img/logo.png" alt="Logo"> 
 
    </div> 
 
    <div class="page-scroll"> 
 
    <a href="#about" class="btn btn-circle" style="color:#000000"> 
 
     <i class="fa fa-angle-double-down animated"></i> 
 
    </a> 
 
    </div> 
 
    </div> 
 
</section>

Quelle

2016-05-03 Sachin Menon

mit den oben js ich in der Lage bin das übergeordnete Div mit Hilfe des Kindes div zu ändern. Ich bin einfach nicht in der Lage, irgendwelche gewünschten Übergänge zu machen. wie das geht, wäre hilfreich –

Sie fügen und mit js Entfernen Klasse, die nach unten können nicht verlangsamen.

Was Sie tun können, ist hinzuzufügen Übergang in css

.is-hover { 
    background: url(../img/bg2.jpg) no-repeat top center; 
    transition:all ease-in-out 0.3s; 
    -moz-transition:all ease-in-out 0.3s; 
    -ms-transition:all ease-in-out 0.3s; 
    -o-transition:all ease-in-out 0.3s; 
    -webkit-transition:all ease-in-out 0.3s; 
}

Es ist wichtig, Präfix wie -moz-, -webkit- usw. hinzufügen, um es in allen Browsern arbeiten zu lassen.

Quelle

2016-05-03 07:37:15

Danke Kumpel. Aber arbeiten in Chrome, nicht in Firefox. Ich habe alle obigen Zeilen wie erwähnt hinzugefügt. –

bist du sicher ?? Könntest du eine Geige dafür schaffen? –

Es ist kein JavaScript erforderlich. Sie können dies leicht mit CSS-Übergänge erreichen:

.bground { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center; 
 
    position: relative; 
 
} 
 

 
.bground:after { 
 
    content: ""; 
 
    background: url("http://placehold.it/300x200/ff0000") no-repeat top center; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all .3s; 
 
} 
 

 
.bground:hover:after { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div class="bground"></div>

Quelle

2016-05-03 07:47:44 marvinhagemeister

Ja, aber ich möchte auf dem bestimmten Bereich von #hoverdiv schweben, um .bgrounds Hintergrundbild zu ändern –

.bground { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center; 
 
    position: relative; 
 
} 
 

 
.bground:after { 
 
    content: ""; 
 
    background: url("http://placehold.it/300x200/ff0000") no-repeat top center; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all .5s linear 0s; 
 
} 
 

 
.bground:hover:after { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    color:#fff; 
 
}

<div class="bground"></div>

Quelle

2016-05-03 07:57:34 user2053945

Dies ist nur ein Duplikat meiner Antwort – marvinhagemeister

Wie kann man einen Bildblendeffekt beim Schweben erzielen?

Antwort

Verwandte Themen