Image Hover

Hi Anthony,

You can attach an hover effect to any element. You can css or jQuery do this.

I made a really simple pen to show you how you can go about this. linky In this pen there are two really simple examples to show you how you can attach a hover to an image.

There are better ways to do this like having a wrapper around the list and the image and attaching a hover to the wrapping div. I had a look around and found this article that has a few tutorials that you can do to help you with this linky

If you haven't already done the course Build an Interactive Website I would start here.

I hope this helps :)

JP Nothard Dam you! I just did the same thing haha http://codepen.io/anon/pen/cBFAE

Ah well never mind

Edit: mine is slightly differnt in that its inside the image block

Thanks guys much appreciated that... both methods are good but Daniel's method is what I was after inside the image when hover over!

Thanks for your time!

No problem remember you can add something like transition: 1s ease all; if you want it to slowly fade in, Always a cool effect.

I know I have been playing around with the transitions there cool, I'm working on a one page scrolling site just to showcase some advanced products my company sells i'll post the link when completed if anyone is interested :)

Yeh, im interested in how it turns out. Look forward to seeing it :)

Cheers Daniel will do!

If the image is an important to the understanding of the page it would be better to include it as an img tag in the HTML rather than a css background image. I believe older versions of IE can have problems with opacity as well.

I was trying something similar a few days ago and came up with this solution (though saying about IE mine does use rgba).

Nice solution Tom looks good :)

Hi guys, its not complete but iv uploaded the site to run some test regarding the php forms in the modal window take a look let me know what you think on the hover effects and anything else you may notice it would be much appreciated

http://www.3d-laser-scanner-hire.co.uk/

thanks

Hi Tom,

Thanks for your comments they are much appreciated my company has invested a lot of money in these instruments and the pressure is on to get a decent functioning website to match :) Its good to get an out siders perspective on things as its been a long couple of days working on this.

I am planning on minimising all the css files as you suggested and also the images will be optimised I have not prepared it fully for production yet.

I was struggling a bit with the second line on the list items to get them to line up with the above one. also I agree with the slider I actually prefer not to use them but my boss wants us to have the different instruments scrolling across the top the slider does move on its own but it stops on hover and also is quite long between slides i think this may be why you thought you had to click them.

excellent screencast by the way thanks for all your effort :)

I will be working on the site over the weekend eventually it will be moving to a full website with multiple pages, blog and support sections this is just version 1 of the site hopefully it goes well.