HTML Help - Pop up to Lightbox or similar, Novice web builder Options

[sleightlydavid]

Hi All,

I need some help please, and I'm sure it's simple to a lot of you out there!

I am a novice when it comes to web design etc, and I use wordpress for my own website I am developing myself.

I haven't used HTML, CSS before, as mainly used page builders etc.

However, I have been trying to do something as simple as Have an Image of a Colour, & then when you hover over it changes the image to a piece of furniture in that colour. Well tonight I finally managed it, and also gave a caption.

What I would like to do now is enable the user to click on the image to Enlarge it in lightbox (or similar) so they can view both images bigger to see the detail & also enable me to write a bigger caption. Is this possible?

Every time I try to add something, it creates another image below my original, but the click through doesn't work.......HELP!

This is what I have so far:

<a href="URL ADDRESS"><img src="http://thewagtailway.co.uk/wp-content/uploads/2018/04/Neptune-Walnut.png" onmouseover="this.src='http://thewagtailway.co.uk/wp-content/uploads/2017/04/Lady-Grey-Dog-Bed-Medium.jpg'" onmouseout="this.src='http://thewagtailway.co.uk/wp-content/uploads/2018/04/Neptune-Walnut.png'" /></a>

<figcaption>
WALNUT
</figcaption>

Finally I also require the hover to work on mobile or touch devices....any ideas how I can amend to include this?

Thanks all in advance for your help

This post has been edited by sleightlydavid: Apr 4 2018, 07:50 PM