我希望悬停效果在 0.3 秒内从 0 中心开始到全尺寸动画。效果是我想要的,但动画不起作用。我要构建的页面将包含八个不同的图像(两列,每列四张)我希望这种悬停效果在您悬停每个图像时起作用。
#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;
top:0;
width: 0px;
height: 0px;
background:rgba(0, 0, 0, .5);
border:1px solid #fff;
margin:10px;
color:#fff;
display:none;
overflow:hidden;
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.tabcontent:before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.tab:hover > .tabcontent{
display: block;
width: 200px;
height: 200px;
}
.tab:hover:before, .tab:active:before{
-webkit-transform: scale(1);
transform: scale(1);
}
<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-->
最佳答案
关于css - 我希望 .tabcontent 在 0.3 秒内从 0 中心显示为全尺寸动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37303114/