als Element über sie beseelt

animateLense(); 
 

 
function animateLense() { 
 
    $("#lense").animate({ 
 
    left: "200px", 
 
    top: "150px", 
 
    }, 2000); 
 
}

.bg-blurry { 
 
    width: 300px; 
 
    height: 250px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
} 
 

 
.bg-clear { 
 
    width: 300px; 
 
    height: 250px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    opacity: 0; 
 
} 
 

 
.lense { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: solid black 2px; 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <img class="bg-blurry" src="http://www.atlantisbahamas.com/media/Things%20To%20Do/Water%20Park/Beaches/Gallery/waterpark_covebeach.jpg"> 
 
    <img class="bg-clear" src="http://www.atlantisbahamas.com/media/Things%20To%20Do/Water%20Park/Beaches/Gallery/waterpark_covebeach.jpg"> 
 
    <div class="lense" id="lense"></div> 
 
</body> 
 
</html>

Gibt es eine Möglichkeit, ein Hintergrundbild mit einer Opazität von 0 bekam auf 1 zu haben, wie ein anderes Element über sie beseelt? Zum Beispiel:

Stellen Sie sich vor, ich habe eine div class=bg-img300px by 300px und eine andere div class=small-box das ist 100px by 100px. Wie die small-box über die bg-img, von links nach rechts gleitet, ändert sich die bg-img Opazität von 0 auf 1. Art von einer Lupe würde funktionieren .. aber Ändern der Deckkraft nur innerhalb der small-box und nirgendwo sonst.

Ich schätze jede Zeit, die Sie mir bei der Lösung dieses Problems gewidmet haben. =) Dies kann durch Leinwand erreicht werden. Ich bin einfach nicht talentiert genug, um herauszufinden, wie!

Also in dem Beispiel zur Verfügung gestellt habe ich eine verschwommene img und eine klare. Das Löschen wurde auf eine Undurchsichtigkeit von 0 gesetzt. Ich möchte es erhalten, so dass die klare Img-Opazität 1 in der Box ist. Vielleicht gibt es auch hier einen anderen Ansatz. Ich bin offen für Vorschläge.

Quelle

2017-01-25 Nappstir

Können Sie uns ein Beispiel für den Code geben, mit dem Sie arbeiten, und einige Beispiele dafür, was Sie versucht haben? – Michael

Und kleine Box sho Sollen wir ziehen? Ihr aktuelles HTML/CSS/js Setup würde sicherlich helfen. Und das könnte ein guter Ausgangspunkt sein: https://css-tricks.com/clipping-masking-css/ – sinisake

Ich füge Code hinzu, woran ich gerade arbeite. Ich hoffe, es hilft. – Nappstir

Das folgende würde wahrscheinlich nur in ähnlichen Anwendungsfällen arbeiten, was Sie oben beschrieben haben:

Das Bild statt als Hintergrund auf div.small-box hinzufügen könnte. Wenn Sie background-size auf 300px einstellen, sollten Sie in der Lage sein, die background-position zu animieren, wenn die small-box über div.bg-img animiert.

Hoffe, dass hilft. Ich kann eine Demo auf CodePen einrichten, wenn Sie möchten.

Quelle

2017-01-25 00:44:33

könnten Sie box-shadow verwenden:

Grund Beispiel unten: (in Ihrem Fall. parent{position:relative;overflow:hidden;}child {position:absolute;/* size and coordonates to your needs*/} Kind auf schweben oder über eine Animation oder Javascript bewegen

div { 
 
    position:absolute; 
 
    top:10%; 
 
    left:10%; 
 
    height:100px; 
 
    width:100px; 
 
    border-radius:100%; 
 
    box-shadow:0 0 0 1600px, inset 0 0 2em; 
 
    transition:1s; 
 
    } 
 
html { 
 
    background:url(http://lorempixel.com/600/600); 
 
    background-size:cover; 
 
    } 
 
html:hover div { 
 
    top:50%; 
 
    left:80%; 
 
    }

<div></div>

Quelle

2017-01-25 00:51:22

Ziemlich saubere Lösung! Ich werde es versuchen und berichten! =) Danke für deine Antwort. – Nappstir

als Element über sie beseelt

Antwort

Verwandte Themen