Ich mag .tabcontent von 0 Zentrum in voller Größe animierte über 0,3 Sekunden

Question

Sample of hover effect

ich den Hover erscheint Effekt will von 0 innen nach außen in voller Größe über 0,3 s werden animierte zu starten. Der Effekt ist was ich will, aber die Animation funktioniert nicht. Die Seite, die ich erstellen werde, besteht aus acht verschiedenen Bildern (zwei Spalten vier in jedem). Ich möchte, dass dieser Hover-Effekt funktioniert, wenn Sie jedes Bild schweben lassen.

#tabbox{ 
 
\t height: 300px; 
 
\t position: relative; 
 
\t //border: 2px solid #888; 
 
} 
 

 
#tabbox img{ 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t width: 240px; 
 
\t height: 240px; 
 
} 
 

 
.tab { 
 
\t float: left; 
 
} 
 

 
.tabcontent{ 
 
\t position: absolute; 
 
\t padding:10px; 
 
\t top:0; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t background:rgba(0, 0, 0, .5); 
 
\t border:1px solid #fff; 
 
\t margin:10px; 
 
\t color:#fff; 
 
\t display:none; 
 
\t overflow:hidden; 
 
\t -webkit-transition: height 0.3s ease-in-out; 
 
\t -moz-transition: height 0.3s ease-in-out; 
 
\t -o-transition: height 0.3s ease-in-out; 
 
\t transition: height 0.3s ease-in-out; 
 
} 
 

 
.tabcontent:before{ 
 
\t content: ""; 
 
\t position: absolute; 
 
\t z-index: -1; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t -webkit-transform: scale(0); 
 
\t transform: scale(0); 
 
\t -webkit-transition-property: transform; 
 
\t transition-property: transform; 
 
\t -webkit-transition-duration: 0.3s; 
 
\t transition-duration: 0.3s; 
 
\t -webkit-transition-timing-function: ease-out; 
 
\t transition-timing-function: ease-out; 
 
} 
 

 
.tab:hover > .tabcontent{ 
 
\t display: block; 
 
\t width: 200px; 
 
\t height: 200px; 
 
} 
 

 
.tab:hover:before, .tab:active:before{ 
 
\t -webkit-transform: scale(1); 
 
\t transform: scale(1); 
 
}

<div id="tabbox"> 
 
\t <div class="tab"> 
 
\t \t <img src="http://zone1.gingermartinco.netdna-cdn.com/wp-content/uploads/2012/04/Napa-Real-Estate-Realtor.jpg" /> 
 
\t \t <div class="tabcontent"> 
 
\t \t \t <p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p> 
 
\t \t </div><!--tabcontent--> 
 
\t </div><!--tab--> 
 
</div><!--tabbox-->

Answer 1

einfach die display: none; von .tabcontent entfernen, da diese Eigenschaft nicht animiert werden können, können nur die Nummer Eigenschaften animiert werden.

Fiddle:

https://jsfiddle.net/uxouomoy/

Answer 2

Ihre Geige und Ihre Frage Code ist nicht das gleiche. Aber den Code von der Geige nehmen, sollten Sie den Übergang nur in .tabcontent Stil setzen. Verwenden Sie die oberen und linken Eigenschaften, um von der Mittelposition zur linken Eckposition zu animieren.

Siehe fiddle

Hier ist die CSS es verwendet:

#tabbox { 
 
    height: 300px; 
 
    position: relative; 
 
    //border: 2px solid #888; 
 

 
} 
 
#tabbox img { 
 
    cursor: pointer; 
 
    display: block; 
 
    width: 240px; 
 
    height: 240px; 
 
} 
 
.tab { 
 
    float: left; 
 
} 
 
.tabcontent { 
 
    position: absolute; 
 
    padding: 10px; 
 
    width: 0px; 
 
    height: 0px; 
 
    background: rgba(0, 0, 0, .5); 
 
    border: 1px solid #fff; 
 
    margin: 10px; 
 
    color: #fff; 
 
    display: block; 
 
    overflow: hidden; 
 
    top: 100px; 
 
    left: 100px; 
 
    visibility: hidden; 
 
    transition-timing-function: ease-in-out; 
 
    transition-duration: 0.3s; 
 
    transition: width top left; 
 
} 
 
.tab:hover > .tabcontent { 
 
    visibility: visible; 
 
    width: 200px; 
 
    height: 200px; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div id="tabbox"> 
 
    <div class="tab"> 
 
    <img src="http://zone1.gingermartinco.netdna-cdn.com/wp-content/uploads/2012/04/Napa-Real-Estate-Realtor.jpg" /> 
 
    <div class="tabcontent"> 
 
     <p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p> 
 

 
    </div> 
 
    <!--tabcontent--> 
 
    </div> 
 
    <!--tab--> 
 

 

 
</div> 
 
<!--tabbox-->