Html 背景图像悬停css问题

我试图在这两张图片上有一个简单的鼠标悬停效果，但它不起作用。有人能帮我吗

我需要一个淡入淡出过渡时，鼠标是在图片。 多谢各位

*{
填充：0；边距：0；
}
html，正文{高度：100%；}
.身体{
高度：100vh；
文本对齐：居中；
}
.广场{
宽度：100vm；高度：100vm；/*适用于IE9*/
宽度：100vmin；
高度：100V分钟；
显示：内联块；
垂直对齐：中间对齐；
保证金顶部：计算（（100vh-100vmin）/2）；
背景色：#eee；
字号：0；
}
.方：以前{
内容：“；
身高：100%；
}
.square:在.content之前{
显示：内联块；
垂直对齐：中间对齐；
}
#左内容{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');	
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：左；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#正确内容{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：对；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#左内容：后{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：左；
不透明度：0；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#正确内容：之后{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：对；
不透明度：0；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#左内容：悬停：之后{
不透明度：1；
}
#右内容：悬停：之后{
不透明度：1；
}

使用

内容：“”以显示元素


*{
填充：0；边距：0；
}
html，正文{高度：100%；}
.身体{
高度：100vh；
文本对齐：居中；
}
.广场{
宽度：100vm；高度：100vm；/*适用于IE9*/
宽度：100vmin；
高度：100V分钟；
显示：内联块；
垂直对齐：中间对齐；
保证金顶部：计算（（100vh-100vmin）/2）；
背景色：#eee；
字号：0；
}
.方：以前{
内容：“；
身高：100%；
}
.square:在.content之前{
显示：内联块；
垂直对齐：中间对齐；
}
#左内容{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');	
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：左；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#正确内容{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：对；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#左内容：后{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：左；
不透明度：0；
内容：''；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#正确内容：之后{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：对；
不透明度：0；
内容：''；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#左内容：悬停：之后{
不透明度：1；
}
#右内容：悬停：之后{
不透明度：1；
}

使用
内容：“”以显示元素


*{
填充：0；边距：0；
}
html，正文{高度：100%；}
.身体{
高度：100vh；
文本对齐：居中；
}
.广场{
宽度：100vm；高度：100vm；/*适用于IE9*/
宽度：100vmin；
高度：100V分钟；
显示：内联块；
垂直对齐：中间对齐；
保证金顶部：计算（（100vh-100vmin）/2）；
背景色：#eee；
字号：0；
}
.方：以前{
内容：“；
身高：100%；
}
.square:在.content之前{
显示：内联块；
垂直对齐：中间对齐；
}
#左内容{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');	
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：左；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#正确内容{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
背景尺寸：封面；
宽度：50vmin；
高度：100V分钟；
浮动：对；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-m
#left-content:hover {
    opacity:0.2;
}
#right-content:hover {
    opacity:0.2;
}