Looking for the same type of rollover only with 2 or more images set in a page. can you help?

Support
#1

Continuing the discussion from Rollover Image:

to clarify, I need to do this without a filter, but with urls to the images. Thank you!
Update: I was able to update cornerstone and am using the Classic Slider which is the responsive slider which works great. The only thing I need is to remove the navigation icons, which I turned off, but would like on mouse click and touch on mobile. any help with that would be awesome. thank you again

#2

Hello There,

Thanks for writing in! The roll over effect discussed in the thread applies a grayscale effect. If you want to use this in your images with urls in it, you can update the css code into this:

a img{
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);    
}

a:hover img {
  -webkit-filter: grayscale(0);
  filter: none;
}

If you do not want the filter, you can remove the css filter and replace it with your own styling.

Meanwhile, the navigation of the classic slider has some options. Just enable the touch navigation and you can disable the prev/next navigation.

Hope this helps.

#3

Thank you! so I just need to change out the filter style with URLs to each image?

#4

Hi there,

If by URL you mean that you have a colored and gray versions of the images and you want to change the URL to show the gray on mouse hover, that is not possible with simple CSS code and you need to write an extensive Javascript code, and you will have a problem, as soon as you hover over the image the URL changes, but it takes time for the browser to load the image so you will have a no image case for a second till the image loads and then it shows the image.

This will happen for the first time and is a bad effect. To get around that you will need to preload the image in the browser which again has a complex technique.

That kind of customization is way beyond of our support scope and you will need to hire a developer to code the feature for you.

Thank you for your understanding.

#5

Thank you for taking the time to reply. Ive found another solution. Thanks again!

#6

Glad that you have managed to fix the issue :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.