Andrin Spitzer
Mitglied
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:
Original style:
Abgeänderte Html:
Abgeänderte Css:
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:
HTML:
<div class="team-box">
</div><div class="team-box">
</div><div class="team-box">
</div><div class="team-box">
</div>
Original style:
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;
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:
Code:
<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:
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);
}