Mouse-Over Image swap for project pages

[ngoma]

I would like to show another image upon mouse-over and hover on portfolio images.

Only way seems to be by turning portfolio images into thumbnails of another project.

But then how to deactivate the hyperlink on the thumbnail which opens up the embedded project (which obv. should not be accessible)? Should be possible?

Also, turning off the title for thumbnails in "Customise" turns it off for all of them, including those on category pages, for which I would like the thumbnails to show titles if possible (But this is a minor issue).

---

Have tried to do mouse-over image change with HTML code,
which works, but makes resizing behaviour very weird and not acceptable.

Or additional plug-ins, which I hesitate to instal...

There must be an easier way to do this simple thing???

big thanks in advance.

[mariusjopen]

Dear @ngoma
I would give the thumbnail solution another shot to keep it simple.
You can give the image-container or the image itself a CUSTOM CSS with ````pointer-events: none;`````
Then you cannot click on them anymore.

Also you can turn off the project title with CUSTOM CSS and giving those elements a custom class.

Hope I could help.

Best!

Marius

[ngoma]

OK thanks! I am CSS virgin but will try to put in ````pointer-events: none;````` :)

What do i input for giving elements a custom class for turning off project titles for each thumbnail?

Moocho Grassy Ass!

[mariusjopen]

Dear @ngoma
you can right click on an element in the Gridder and add a CUSTOM CLASS or ID.

Hope that helps!

Best!

Marius

[ngoma]

Thank you... But it isn't working. I've managed to only turn off all behavior for the dummy thumbnail, so that it doesn't even mouse over anymore... No luck in only turning off the hyperlink. Any other pointers? Thanks!

[mariusjopen]

Dear @ngoma
do you use an Element or Thumbnail Grid or do you just place the Thumnails separately?

Best!

Marius

[ngoma]

I use a thumbnail grid on the landing page. And that's perfectly fine the way it is.

In project pages, I am separately placing thumbnails of dummy projects to get the mouse-over image-swap effect, and want to turn off the hyperlink to the dummy project.

... thanks!

[mariusjopen]

Dear @ngoma
ah great you found that solution. Even though it is not a very clean one.

Yes. it would be good to address each Element-Grid element by an own ID.

I will write this down for the future.

Best!

Marius

[ngoma]

OK so the trick is to give each dummy project its own ID? I'll try that... Thanks!

[mariusjopen]

Dear @ngoma
great! Let us know if you need help!

Best!

Marius