[daisyparsonsParticipant]

Hi,

I am using visual composer but can try to work with code in a simplistic way.

I like the way images in a responsive lightbox fade slightly when you hover over them, as a hint that you can click them to view them in lightbox mode.

I have replaced some of my images with slides in sliders, however, as this meant that I was able to have the pictures fade in as the page loads, rather than appearing abruptly.

1. I would like to be able to arrange it so that slides fade slightly when you hover over them too – is this possible?

2. I would also like to arrange it so that block items fade slightly when you hover over them.

I will put my URL and login details in a private reply.
Wordpress version 4.1
Theme version 3.1.1
X – Shortcodes version 2.6.1
WPBakery Visual Composer version 4.3.5

Many thanks,

Daisy

[daisyparsonsParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi there,

Thanks for writing in! You can try these code for the hover effect:

1. For your slider, add the following CSS code via Appearance > Customize > Custom > CSS:

.rev_slider:hover {
opacity: 0.5 !important;
}

2. For block items, add the following jQuery script via Appearance > Customize > Custom > Javascript:

jQuery(document).ready(function($){
	$('.x-slides li').each(function(){
		$(this).hover(function(){
			$(this).css("opacity", "0.5");
		}, function(){
			$(this).css("opacity", "1");
		});
	});
});

Let us know how this goes!

[daisyparsonsParticipant]

Hi, thank you so much for your quick reply! I am still getting used to the forum so only just saw it.

I have input the code and script now.

1. The ‘slider opacity’ one worked – although I wasn’t clear in my original question that the slider I am using is the native one, not the ‘revolution slider’. So I altered the code you gave me to what follows:

.x-slides:hover {
opacity: 0.5 !important;
}

It works now, but the change to 50% opacity is abrupt, and not smooth as it is when I use a straightforward image instead of slider. Is there some extra bit of code I can add to get it to change to 50% opacity more smoothly?

2. Although I have input the jQuery script into the Javascript area, it hasn’t seemed to have any effect on the opacity of block items when I hover over them. If you are able to find a solution to this, it would be ideal to have the same smoothness when changing opacity as described above.

Thank you so much for your help with this – really appreciate it!

Daisy

[John EzraMember]

Hi Daisy,

Thanks for updating us. For 1. Pleas try the following CSS (replace the previous one).

.x-slides {
    opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}

.x-slides:hover {
    opacity: 0.5!important;
}

As for 2, would you mind pointing us to some specific block elements so we can test the if the script is working or not, and perhaps provide you with a better solution. Thanks!

[daisyparsonsParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Daisy,

Since the above css code works for you. Simple update the code to add the block images selector, the code now will look like this.

.x-slides, .x-block-grid .x-block-grid-item a img {
    opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}

.x-slides:hover, .x-block-grid .x-block-grid-item a img:hover {
    opacity: 0.5!important;
}

Hope it helps, Cheers!

[daisyparsonsParticipant]

Amazing, it works!

Thanks so much for all your help!

[Nabeel AModerator]

Glad we could help.

Cheers!

[Author]

Posts