Grow your CSS skills. Land your dream job.

Need html code for fading an image on mouse hover

  • # August 7, 2012 at 10:00 pm

    Hello, I hope I have come to the right place. I am currently trying to set up my own website and I need a HTML code written for image fade in as well as another code for image fade out. I don’t have Dreamweaver or JQuery and I have been searching everywhere for a code that I can use.

    My image code is: Photobucket

    Can someone help me out with a html code to make this scribble fade only once from 0% to 100% on mouse hover and then write another code to have this image fade only once from 50% to 100%. I have a few other images that I want to fade only once from 50% to 100% on mouse hover, but if the image code text can be highlighted in red so I know that I just need to change that part, that would be greatly appreciated!

    Any help will be greatly appreciated. Thanks! :)

    # August 7, 2012 at 10:09 pm

    Is this what you are after? http://jsfiddle.net/joshnh/dZFMW/

    # August 7, 2012 at 10:16 pm

    Josh that is perfect! I’d also love the html code in reverse, so from green to white. Thanks so much! :D

    # August 7, 2012 at 10:51 pm

    Is this the correct html code to have the image go from 0% to 100%?:

    {
    opacity: 0; /
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    }
    img:hover {
    opacity: 1;
    }

    And is this the correct code to make the image go from 70% to 100%?:

    {
    opacity: .7; /
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    }
    img:hover {
    opacity: 1;
    }

    As it hasn’t really worked… Do I need to position the {…} code within the < ...> code?

    Once again thanks for your help.

    # August 8, 2012 at 4:09 am

    You need to place the code inside of a style sheet or a style tag. Google “Using CSS”, look for an article from W3Schools.

    # August 8, 2012 at 4:20 am

    The web site that I am using to set up my website is http://www.moonfruit.com they only have the option for html snippets. It would be great if I could do this using a html code… Any help to create a html code would be very much appreciated. Thanks!

    # August 8, 2012 at 6:01 am

    You can’t do transitions using html, you have to have access to the css files. If moonfruit won’t let you then I’m afraid you are out of luck.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".