更改全屏背景並在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/