Javascript CSS/HTML中的图像转换（？）

我试图让我的图像增长，褪色，并有文字从底部上来。有没有办法做到这一点？我尝试过“.grow:hover”的变体，但它对我不起作用。我一直在尝试让我的图像（在底部的侧边栏分隔符中）这样做。可以找到一个我找到但无法复制的示例

这是我的HTML和CSS

/*===========================
==========车身风格=============
=========================== */
身体{
背景图片：url（'images/image.png'）；
颜色：#000305；
字体大小：87.5%；
/*基本字体大小：14px*/
字体系列：'Trebuchet MS'，Trebuchet'，Lucida Sans Unicode'，'Lucida Grande'，'Lucida Sans'，Arial，Sans serif；
线高：1.429；
保证金：0；
填充：0；
文本对齐：左对齐；
}
.身体{
明确：两者皆有；
保证金：0自动；
宽度：70%；
}
/* ===========================
=============标题================
=========================== */
h1{
字号：2.5em
}
氢{
字号：1.571em
}
/*22px*/
h3{
字号：1.429em
}
/*20px*/
h4{
字号：1.286em
}
/*18px*/
h5{
字号：1.143em
}
/*16px*/
h6{
字号：0.95em
}
/*14px*/
h1，
h2，
h3，
h4，
h5，
h6{
字体大小：400；
线高：1.1；
边缘底部：.8em；
}
/* ===========================
=======锚定样式===========
=========================== */
身体{
背景图片：url（'images/image.png'）；
颜色：#000305；
字体大小：87.5%；
/*基本字体大小：14px*/
字体系列：'Trebuchet MS'，Trebuchet'，Lucida Sans Unicode'，'Lucida Grande'，'Lucida Sans'，Arial，Sans serif；
线高：1.429；
保证金：0；
填充：0；
文本对齐：左对齐；
}
a{
大纲：0；
}
img{
边界：0px；
文字装饰：无；
}
答：林克，
a:参观了{
颜色：#CF5C3F；
填充：0 1px；
文字装饰：无；
}
.main标题导航{
背景:#666；
字号：1.143em；
高度：40px；
线高：30px；
保证金：0自动；
文本对齐：居中；
边界半径：20px；
左边距：-40px；
}
.mainHeader导航ul{
列表样式：无；
保证金：0自动；
宽度：430px；
}
.main头导航ul li{
显示：内联块；
垂直对齐：顶部；
}
.main标题导航a:链接，
.main报头nav a:已访问{
颜色：#fff；
显示：内联块；
高度：30px；
填充：5px23px；
文字装饰：无；
}
.mainHeader导航a：悬停，
.main收割台导航a：激活，
.main标题导航激活a:链接，
.mainHeader导航激活a：已访问{
颜色：#fff；
}
.main头导航李a{
背景：-webkit重复线性梯度（#666666，#666666 41px，#FF9317 41px，#FF9317 82px）；
背景：-moz重复线性梯度（#666666，#666666 41px，#FF9317 41px，#FF9317 82px）；
背景：重复线性梯度（#666666，#666666 41px，#FF9317 41px，#FF9317 82px）；
背景大小：100%200%；
-webkit转换：所有1；
-moz转换：所有1；
过渡：均为0.5s；
}
.main标题导航a：悬停{
背景位置：0px-40px；
}
.主收割台导航ul li h1{
高度：40px；
线高：10px；
左边距：10px；
右边距：10px；
}
/* ===========================
=======内容区=====
=========================== */
.主要内容{
溢出：隐藏；
线高：25px；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
}
.topcontent{
背景色：#EBE4DD；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
利润底部：3%；
}
.底部内容{
背景色：#EBE4DD；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
}
.内容{
宽度：68%；
浮动：左；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
}
.帖子信息{
字体：斜体；
颜色：#919191；
字号：85%；
}
/* ===========================
==========侧边栏====================
=========================== */
.顶部边栏，
.中间侧栏，
.底部边栏{
宽度：24%；
浮动：左；
左缘：2%；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
背景色：#EBE4DD；
填充物：2%3%；
利润底部：2%；
}
/* ===========================
=============页脚=========================
=========================== */
.mainfoter{
宽度：100%；
浮动：左；
利润率最高：2%；
利润底部：2%；
左侧填充：0；
背景色：#666；
边界半径：20px；
-moz边界半径：20px；
-webkit边界半径：20px；
颜色：#FFF；
}
.mainpooter{
宽度：91%；
利润率：2%自动；
}
/* ===========================
=======其他===========
=========================== */
@仅媒体屏幕和（最小宽度：150px）和（最大宽度：780px）{

Craftd的官方网站









欢迎来到我的频道

知识本身是一种美德，是一位杰出的献身者，他在工作和生活中临时参与，但在工作和生活中，他是一个非常小的人，他在工作中的表现是，他是一个普通消费者
第二种情况是，在第二种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下，在第三种情况下

您可以添加
@关键帧
来完成此操作。我使用了一些JavaScript代码在动画结束时将CSS规则添加到
。img:hover


var-imgs=document.getElementsByClassName（'img'）；
var事件=['webkitAnimationEnd'，'animationend']；
对于（i=0；i