更改全屏背景并在DIV悬停时添加文本

Question

我正在使用Bootstrap，并且我有6列带有图标/文本的列，当我将鼠标悬停在每列上时，我需要该节的背景进行转换（悬停在每列上会将该节的背景更改为其他内容）是文本和将出现在每列中的按钮。

我试图通过使用jQuery中的6种不同变体并将它们隐藏/淡入淡出来使用jQuery，但这太复杂了：

$('.process-box').hover(function() {
    $(this).find('.process-intro').hide();
    $(this).find('.process-content').fadeIn();
}, function() {
    $(this).find('.process-content').hide();
    $(this).find('.process-intro').fadeIn();
});

遵循这些原则，但必须有一种使用CSS的简便方法？

我已尝试将本教程应用于我的情况，但是我很难在我的代码中应用相同的方法： http : //designshack.net/articles/css/swap-your-pages-background-image-on-navigation -徘徊/

我已经用示例设置了jsfiddle： https ://jsfiddle.net/hqa8k0ze/

更新

我已经弄清楚了如何使用jQuery更改图像：

$('.content1').hover(function() {
$('.services-websites').css({'background-image': "url(images/services-apps.jpg)" , 'transition': "opacity 1s ease-in-out"})
}, function() {
$('.services-websites').css({'background-image': "url(images/services-websites.jpg)" , 'transition': "opacity 1s ease-in-out"})
});

图像不会在第一次悬停时发生变化，而是会先将背景变白，就像图像消失一样。 同样由于某种原因，过渡没有。

我是否还需要六个不同的功能来更改每个列悬停时的图像？

Answer 1

您可以在列的悬停上使用不透明度过渡：

.column-inner{
  opacity: 0;
}
.col-lg-2:hover .column-inner{
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

column-inner是要显示/隐藏的每个列中内容的包装，您只需在其父级（即它自己的列）悬停时，将其不透明性进出即可。

https://jsfiddle.net/hqa8k0ze/1/