auf einem überlappenden Element

hey Jungs zu verwandeln Aufbringens ich auf Transformationen arbeiten und testen sie divs auf überlappende und ich konnte nicht die div machen, die unter ist zu verwandelnauf einem überlappenden Element

ist es möglich, sie ohne JS zu tun?

, wie Sie die lila div auf schweben Transformationen und verschwindet sehen können, und ich möchte das rote div unter ihm zu drehen, etwas zu und ich konnte es nicht

.container { 
 
    position: relative; 
 
    padding: 2%; 
 
} 
 

 
.cover { 
 
    position: absolute; 
 
    top: 13px; 
 
    left: 13px; 
 
} 
 
.box1 { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.box2 { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: purple; 
 
    transition: 2s ease-in-out; 
 
} 
 
.box2:hover { 
 
    transform: rotate(35deg); 
 
    transition: 2s ease-in-out; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div class="box1"></div> 
 
    <div class="box1"></div> 
 
    </div> 
 
    <div class="cover"> 
 
    <div class="box2"></div> 
 
    <div class="box2"></div> 
 
    </div> 
 
</div>

Quelle

2017-02-12 Decapitar

Müssen Sie box1 und box2 "rotieren", wenn eine der beiden Ebenen schwebt? Sie sollten genauer bestimmen, was Sie erreichen müssen. – Bright

ja tut mir leid, ich brauche sie beide gedreht, wenn ich auf box2 schwebe Ich möchte Box 1 auch umwandeln – Decapitar

Darf ich fragen, ob es etwas mehr als nur das überdachte, farbige Quadrat sein soll? ... oder sollte es andere Elemente enthalten? – LGSon

-Update funktioniert basierend auf einem Kommentar, jetzt mit Pseudo-Elemente anstelle eines verdoppelten Markup

.container { 
 
    padding: 2%; 
 
} 
 
.box { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 
.box::before, 
 
.box::after { 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    transition: 2s ease-in-out; 
 
    background-color: purple; 
 
} 
 
.box::before { 
 
    background: url(http://lorempixel.com/200/200/nature/1); 
 
    background-size: cover; 
 
} 
 
.box:hover::before, 
 
.box:hover::after { 
 
    transform: rotate(35deg); 
 
    transition: 2s ease-in-out; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 
.box:hover::before { 
 
    opacity: 0.6; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Quelle

2017-02-12 21:43:20 LGSon

das ist ein interessanter Weg: O das heißt, wenn ich andere Bilder alles was ich brauche ist ein paar mehr Klassen, aber der Code selbst ändert nicht viel nur die URL – Decapitar

@Decapitar Ja, können Sie Bilder mit Klassen tauschen – LGSon

Dies ist, was Sie

.container { 
 
    width: 500px; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.box:hover .top, 
 
.box:hover .cover { 
 
    transform: rotate(35deg); 
 
    transition: 2s ease-in-out; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 
.top { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.cover { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: purple; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
     <div class="cover"></div> 
 
     <div class="top"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cover"></div> 
 
     <div class="top"></div> 
 
    </div> 
 
</div>

Quelle

2017-02-12 21:50:10 Bright

Ich weiß das Methode, aber ist es möglich zu tun, wie ich es hatte? 2 Abschnitte 1 regulär und 1 Cover? – Decapitar

@Decapitar Soweit ich weiß, ist es mit CSS3 nicht möglich, dass es möglich wäre, einen Elternteil basierend auf dem Kind auszuwählen, aber es gibt keinen solchen Selektor in CSS3. – Bright

@Decapitar Nein, es ist nicht möglich (heute) ohne Skript ... entweder mit der angegebenen Markup-Änderung, oder alle 4 Boxen im selben Elternteil, und es ist mit CSS möglich – LGSon

Just do könnte Brainstorming: Wie wäre es ein Elternteil zu schaffen, indem beide divs in einem div3 setzen, über div3 transparent, Position mit z-index machen die anderen fangen den Schwebeflug ein. Wähle die anderen divs dann einfach als childs von div3: hover.

Quelle

2017-02-13 21:28:00

auf einem überlappenden Element

Antwort

Verwandte Themen