✔ Hover Effect: div inhalt verschieben

[Andrin Spitzer]

Hay hab mal wieder ne css bezogene frage:
Ich will wie in dieser fiddle https://jsfiddle.net/FrankTrog/nRs5u/ den Code auf meinen Code übertragen was allerdings nicht erfolgreich klappt.

Mein Problem grösstes Problem ist das der div auch außerhalb des haupt div's zu sehen ist und das sich der der innere div von der breite nicht automatisch anpassen lässt.

ich hoffe ihr seht das Problem und könnt mir helfen.

Original html:

<div class="team-box">
    </div><div class="team-box">
    </div><div class="team-box">
    </div><div class="team-box">
    </div>

Original style:

.team-box {
    display:                inline-block;
    margin:                 1%;
    width:                  calc(23% - 42px);
    height:                 14em;
    padding:                20px;
    text-align:             center;
    cursor:                 pointer;
    border:                 1px solid  rgba(84, 44, 44, 0.2);
    box-shadow:             0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition:             all 0.8s cubic-bezier(.25,.8,.25,1);
    vertical-align:         top;
    overflow:               hidden;
}
.team-box:hover {
    box-shadow:             0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

@media only screen and (max-width: 800px) {
   
.team-box {
                            width: calc(47.9% - 42px);
    }

Abgeänderte Html:

<div class="team-box">
        <div class="sub-team-box">
        </div>
    </div><div class="team-box">
        <div class="sub-team-box">
        </div>
    </div><div class="team-box">
        <div class="sub-team-box">
        </div>
    </div><div class="team-box">
        <div class="sub-team-box">
        </div>
    </div>

Abgeänderte Css:

.team-box {
    display:                inline-block;
    margin:                 1%;
    width:                  calc(23% - 42px);
    height:                 14em;
    padding:                20px;
    text-align:             center;
    cursor:                 pointer;
    border:                 1px solid  rgba(84, 44, 44, 0.2);
    box-shadow:             0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition:             all 0.8s cubic-bezier(.25,.8,.25,1);
    vertical-align:         top;
}
.team-box:hover {
    box-shadow:             0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.team-box:hover > .sub-team-box{
    bottom:0;
    transition: bottom 0.8s ease;
}

.sub-team-box{
    position:absolute;
    top:px;
    width:10%;
    height:50px;
    background-color: blue;
    transition: bottom 0.8s ease;
}
@media only screen and (max-width: 800px) {
   
.team-box {
                            width: calc(47.9% - 42px);
    }
.team-box img {
    max-width:              calc(100% - 20px);
}

 

[Sempervivum]

• Wenn Du ein Element absolut positionierst, musst Du das Elternelement relativ positionieren.
• transition brauchst Du nur einmal zu notieren, für den Zustand ohne hover.
• Damit das gleitende Element unsichtbar wird, wenn kein Hover vorliegt, musst Du für das Elternelement overflow:hidden setzen.
• bottom musst Du für beide Zustände notieren.

So funktioniert es:
https://jsfiddle.net/Sempervivum/tjzm08xw/1/

 

[Andrin Spitzer]

danke für die schnelle hilfe aber bei mir funktionirt deine fiddle nicht..

 

[Sempervivum]

Probier's noch Mal, ich hatte zunächst eine falsche URL gepostet und dann editiert.
Diese ist richtig:
https://jsfiddle.net/Sempervivum/tjzm08xw/1/

 

[Andrin Spitzer]

Hei danke funktioniert super ich werde das so in meine Page einbauen und für Interessenten werde ich noch ein link mit dem Ergebnis posten.

 

[Sempervivum]

BTW: Inzwischen habe ich gelernt, dass man bei solch einem Layout ohne die Rechnerei mit calc auskommt, wenn man flex-Layout verwendet:

body {
    display: flex;
}
.team-box {
    flex:                   1 25%;

 

[Andrin Spitzer]

BTW: Inzwischen habe ich gelernt, dass man bei solch einem Layout ohne die Rechnerei mit calc auskommt, wenn man flex-Layout verwendet:

body {
    display: flex;
}
.team-box {
    flex:                   1 25%;

oki ich werde mir das mal anschauen vielen dank