Home Ask Login Register

Developers Planet

Your answer is one click away!

ve1jdramas February 2016

Change fullscreen background and add text on hover of DIV

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() {
}, function() {

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/


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?


Nisho February 2016

You can use opacity transition on hover of the columns:

  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.


Post Status

Asked in February 2016
Viewed 3,591 times
Voted 12
Answered 1 times


Leave an answer

Quote of the day: live life