Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elements should appear on hover within each column.
Prior attempts using jQuery involved multiple HTML variations for each hover effect, which became overly 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();
});
I wonder if there is a simpler CSS solution for achieving this dynamic background change effect?
While referencing a tutorial for guidance (http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/), I encountered difficulty in adapting similar techniques to my code.
To demonstrate the issue, I've created a jsfiddle example: https://jsfiddle.net/hqa8k0ze/
UPDATE
A recent breakthrough led me to utilize jQuery for changing the image upon hovering over content1:
$('.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"})
});
However, encountering issues as the image does not switch immediately on the first hover, resulting in a white background before the transition occurs. Furthermore, the transition effect appears to be malfunctioning.
Moreover, I am contemplating whether it's necessary to define six separate functions to manage image changes for every column upon hover.