Twenty Fourteen: mouseover?

  • Unknown's avatar
    marieevepreaux · Member ·

    I know I am probably out of luck on that one, but is there any way to create image mouseover effects with the control we have over the css? I would like to add some nifty little color effects to my footer buttons and to my secondary menu image links (obviously add inserted as text widgets).

    Thanks for any help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    You are not out of luck at all.

    If you give your images ids in your widget you can target them for effects.

    so if the widget html was like this:

    <img id="test" src="https://leadshepherd.files.wordpress.com/2014/07/footer_question_v13.jpg" />

    you could add a halo type effect on on hover by adding this to your css. 

    #test:hover{
	box-shadow: 0px 0px 50px green;
}

    Give each image a different id, and you can give each one a different colored halo.

    If you need more specific code let me know and we can work on the buttons one at a time.

  • Unknown's avatar
    marieevepreaux · Member ·

    It doesnt seem to work. I tried with both my sidebar and footer buttons, saved it and tried in Firefox and Chrome, to no avail.

    Since you are going to graciously work on this with me, I might as well specify that my idea was to change the image to another one when the initial image is hovered – can you help me with that?

  • Unknown's avatar
    lizthefair · Member ·

    I thought that might be your original idea–and it should be possible, but I’ve not figured out how to make it happen with the limitations of what can be put in the widget and what has to go in the CSS.

    The other thing should have worked though. Could you paste your code from both the widget and the CSS you used? I might be able to get you some effects while I think about a around for the other.

  • Unknown's avatar
    marieevepreaux · Member ·

    It seems like the id didn’t “stick”… It weirded me out, but after doing a few tests, it seems like it was because I was both trying to change my widget code in one tab AND modifying the css in another tab. That’s what you get for multitasking!

    It works now that I did it the proper way :)

    So onward to trying to make that image-to-image hover?

  • Unknown's avatar
    lizthefair · Member ·

    So this seems basically magical to me, but I followed the process laid out in this post, putting the HTML in the widget area and the CSS stuff in the in CSS spot and it absolutely works.

    http://kyleschaeffer.com/development/pure-css-image-hover/

    You’ll just need to create a version of your button that has both the hover image and the regular image that you want.

    Once you have the image, let me know if you have any trouble getting the positioning right and I’ll be happy to help.

  • Unknown's avatar
    marieevepreaux · Member ·

    Whoah. This looks way too advanced for me right now. Especially since this website is just in mockup stage and everything is susceptible to change in a few weeks… I guess Ill just keep that in my back pocket and try it later.

    For now, I played around a bit with the box shadow and border attributes and I think it works fine.

    Thanks again!

  • Unknown's avatar
    lizthefair · Member ·

    No problem. I do think we’d be able to implement things pretty easily once the site is closer to being up and running though. If I get some extra time, I might mess with a mockup so I can show you the exact code rather than an example.

    In the meantime, I’m glad the original idea worked ok for you.

  • The topic ‘Twenty Fourteen: mouseover?’ is closed to new replies.