Change fullscreen background and add text on hover of DIV

Question

I am using Bootstrap and I have 6 columns with icons/text inside them, when I hover over each column I need the background of the section to change in transition (hovering each column will change the background of the section to something different) also there is text and a button that will appear in each column.

I tried to do this with jQuery by having the 6 different variations in HTML and hiding/fading them in but this was too complicated:

$('.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();
});

Something along those lines, but there has to be an easier way to do this with CSS?

I have tried to apply this tutorial to my situation but I am having a hard time applying the same methods in my code: http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/

I have set up a jsfiddle with the example: https://jsfiddle.net/hqa8k0ze/

UPDATED

I have somewhat figured out how to change the image with 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"})
});

The image does not change on the first hover it turns the background white first like the image disappears. Also for some reason the transition does not.

Also would I need six different functions to change the image on each column hover?

Answer 1

You can use opacity transition on hover of the columns:

.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 is a wrapper for the content in each column you want to show/hide and you simply transition its opacity in and out on hover of it's parent, the column it self.

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