CSS telescoping Grenze Animation auf Hover

Question

Ich bin ziemlich neu in CSS Animationen und ich habe Probleme, Grenze wie ich will animieren. Ursprünglich wollte ich das linke und rechte Randteleskop von der Mitte haben und die oberen und unteren Ränder treffen, wenn das result-col-Element darüber schwebt.

Ich konnte herausfinden, wie es mit den oberen und unteren Grenzen zu tun, aber ich habe sie in separaten divs, und gab ihnen erste Dimension.

Jede Hilfe oder Vorschläge würden sehr geschätzt werden.

jsfiddle

#case-results { 
 
    background: #f6f5f0; 
 
    padding: 0 0 40px 0; 
 
    text-align: center; 
 
} 
 

 

 
.case-results-title hr{ 
 
    border: 1px solid #959a90; 
 
    width: 35%; 
 
    float: left; 
 
} 
 

 

 
.case-results-title i{ 
 
    font-size: 30px; 
 
    color: #787c74; 
 
    padding-top: 5px; 
 
} 
 

 
.result-col { 
 
    color: #45474e; 
 
} 
 

 
.result-col:hover { 
 
    color: #45474e; 
 
} 
 

 
.result-top { 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    height: 20px; 
 
    border-top: 5px solid #959a90; 
 
    border-left: 5px solid #959a90; 
 
    border-right: 5px solid #959a90; 
 
    padding-bottom: 5px; 
 
    margin-top: 40px; 
 
} 
 

 
.result-col:hover .result-top { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-top: 5px solid #78a1bb; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition: .9s; 
 
} 
 

 
.result-bottom { 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    height: 20px; 
 
    border-bottom: 5px solid #959a90; 
 
    border-left: 5px solid #959a90; 
 
    border-right: 5px solid #959a90; 
 
    padding-top: 10px; 
 
} 
 

 
.result-col:hover .result-bottom { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-bottom: 5px solid #78a1bb; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition: .9s; 
 
} 
 

 
.result-txt { 
 
    min-height: 210px; 
 
    
 
} 
 
.result-txt p{ 
 
    margin:0 0; 
 
} 
 
.result-col:hover .result-txt { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition-delay: .9s; 
 
    /*transition: .5s;*/ 
 
} 
 

 
.result-amount { 
 
    font-size: 45px; 
 
    padding-top: 30px; 
 
} 
 

 
.result-type { 
 
    font-size: 24px; 
 
    padding-top: 20px; 
 
} 
 

 
.result-description { 
 
    padding-bottom: 20px; 
 
    margin: 0; 
 
}

<section id="case-results"> 
 
    \t 
 
    \t <div class="container"> 
 
    \t \t <div class="row"> 
 
       <div class="col-sm-6 result-col col-md-3"> 
 
       <div class="result-top"></div> 
 
       <div class="result-txt"> 
 
        <p class="result-amount">$100</p> 
 
        <p class="result-type">Settlement</p> 
 
        <p class="result-description">blah blah blah</p> 
 
       </div> 
 
       <div class="result-bottom"></div> 
 
       </div> 
 
    \t \t </div><!--/.row--> 
 
    \t </div><!--/.container--> 
 

 
    </section><!--/#case-results-->

Answer 1

Ich denke, Ihre Antwort könnte die min-height Eigenschaft werden Animieren.

Sie müssen eine Mindesthöhe auf den Originalzustand Ihres Containers setzen (result-txt) und dann im Hover-Status größer machen.

Damit benötigen Sie nicht die zusätzlichen oberen und unteren Divs.

.case-results-title hr{ 
 
    border: 1px solid #959a90; 
 
    width: 35%; 
 
    float: left; 
 
} 
 

 

 
.case-results-title i{ 
 
    font-size: 30px; 
 
    color: #787c74; 
 
    padding-top: 5px; 
 
} 
 

 
.result-col { 
 
    color: #45474e; 
 
} 
 

 
.result-col:hover { 
 
    color: #45474e; 
 
} 
 

 
.result-txt { 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    border-top: 5px solid #959a90; 
 
    border-left: 0px solid #959a90; 
 
    border-right: 0px solid #959a90; 
 
    border-bottom: 5px solid #959a90; 
 
    padding-bottom: 5px; 
 
    margin-top: 40px; 
 

 
    height: auto; 
 
    min-height:20px; 
 
} 
 

 
.result-col:hover .result-txt { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-top: 5px solid #78a1bb; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    border-bottom: 5px solid #78a1bb; 
 
    transition: .9s; 
 

 

 
    min-height:200px; 
 
} 
 
.result-txt p{ 
 
    margin:0 0; 
 
} 
 
.result-col:hover .result-txt { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition-delay: .9s; 
 
    /*transition: .5s;*/ 
 
} 
 
.result-amount { 
 
    font-size: 45px; 
 
    padding-top: 30px; 
 
} 
 
.result-type { 
 
    font-size: 24px; 
 
    padding-top: 20px; 
 
} 
 
.result-description { 
 
    padding-bottom: 20px; 
 
    margin: 0; 
 
} 
 
#case-results { 
 
    background: #f6f5f0; 
 
    padding: 0 0 40px 0; 
 
    text-align: center; 
 
}

<section id="case-results"> 
 
    \t 
 
    \t <div class="container"> 
 
    \t \t <div class="row"> 
 
       <div class="col-sm-6 result-col col-md-3"> 
 
       
 
       <div class="result-txt"> 
 
        <p class="result-amount">$100</p> 
 
        <p class="result-type">Settlement</p> 
 
        <p class="result-description">blah blah blah</p> 
 
       </div> 
 
       
 
       </div> 
 
    \t \t </div><!--/.row--> 
 
    \t </div><!--/.container--> 
 

 
    </section><!--/#case-results-->