Hover effect + button on simple image

[rubyvandort]

Hi!

I have been trying to figure out how to get an image to look as your classes images.
So at first you see the normal image, but when you hover the overlay changes in black transparant and the button “view details” appears.

I can’t use the classes because my image and button in the image needs to link to a custom url to another website.

Is there a way to make my image look the same way as the classes images when you hover + incl. the “view details” button? So:
Image normal
Image on hover: overlay effect/scale in effect/button visable

I have called my Single image Class (in visual composer) lanzarote, but just don’t get how i can get it to work:(

I also tried to make it work with the Gird builder from VC as that already has the option scale in + adding a button, but then i can’t get the button to look like yours do and i can’t figure out how to get the overlay effect.

Hope you can help!

I made a temporary login for you to see what i mean, because i have the “maintenance mode on”, i would like to add the effect scale in/overlay/button to the first picture on the page above the slider (for now so it’s easy to find for you) with the light house on it.

These are the login details:
Username: admin
Password: Y*MI%4GuP*PQ63ZNR0C3zYFZ
Website: http://www.dinghycoach.com

Cheers!

[Veena]

Easiest and simplest way to accomplish this would be to do it via HTML generated from the Classes page. Just copy the required HTML generated code from the classes page and paste it in a separate page and edit the contents accordingly , you can modify the image link and details button link .(https://www.livemeshthemes.com/fitpro/classes/#
view-source:https://www.livemeshthemes.com/fitpro/classes/#)
And also pls change the span tag to div element inorder to avoid wordpress autoformat issues .
eg:

to

As long as you use the same CSS classes are used and structure of the HTML remains the same, the styling will get applied. Hope this helps.

[Veena]

Pls import the sample data if you are not done so already .

[rubyvandort]

Hi!!

Wow i did not receive a notification e-mail, so just see your response right now!! Thanks for the advice and help!:)

I found another solution already with one of my plugins so all good:)

Thanks again!

Ps. i have another question, but will make a new topic for it, to keep the forum easy.

[Author]

Posts