Css 如何创建一个div，默认情况下它会显示一张图片，但当您将鼠标悬停在上面时会转换为一些文本细节？

我想创建一个div。 它是300 x 300像素。 默认情况下，它有一张图片。 但当您将鼠标悬停在它上面时，它将转换为文本描述。 还应有0.2秒的过渡期

我不知道我们该怎么做。请帮忙

main、.front、.back{
高度：300px；
宽度：300px；
}
.回来{
显示：无；
}
.前面：悬停。后面{
显示：块；
}

图像名称
图像描述等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等废话废话废话废话废话废话

.front，
.回来{
高度：300px；
宽度：300px；
过渡：0.2s；
}
.回来{
转化：translateY（-80%）；
不透明度：0；
}
.前面：悬停。后面{
不透明度：100；
}

图像名称
图像描述

.front，
.回来{
高度：300px；
宽度：300px；
过渡：0.2s；
}
.回来{
转化：translateY（-80%）；
不透明度：0；
}
.前面：悬停。后面{
不透明度：100；
}

图像名称
图像描述

您可以使用此代码

*{
填充：0；
保证金：0；
框大小：边框框；
}
.main、.front、.back{
高度：300px；
宽度：300px；
位置：相对位置；
}
.back{
身高：100%；
宽度：100%；
位置：绝对位置；
填充物：6em 1em；
文本对齐：居中；
前-100%；
右：0；
颜色：#fff；
背景色：#333333；
-o型过渡：所有0.5s的轻松度；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-webkit过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
} 
.main:悬停，后退{
显示：块；
最高：0%；
}

图像名称
图像描述等等等等等等等等等等

您可以使用此代码

*{
填充：0；
保证金：0；
框大小：边框框；
}
.main、.front、.back{
高度：300px；
宽度：300px；
位置：相对位置；
}
.back{
身高：100%；
宽度：100%；
位置：绝对位置；
填充物：6em 1em；
文本对齐：居中；
前-100%；
右：0；
颜色：#fff；
背景色：#333333；
-o型过渡：所有0.5s的轻松度；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-webkit过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
} 
.main:悬停，后退{
显示：块；
最高：0%；
}

图像名称
图像描述等等等等等等等等等等

我从中得到的问题是，当区域未悬停时，“back”类中的内容不可见。我从中得到的问题是，“back”类中的内容在区域未悬停时不可见。它在上面。