WordPress.org

Ready to get started?Download WordPress

Forums

Tempera
Remove image fade on hover (7 posts)

  1. moojomoore
    Member
    Posted 2 months ago #

    Hello, I'm wondering if there is a way to remove the image fade when you hover over an image?

  2. Angel-Grafik
    Member
    Posted 2 months ago #

    Hi moojomoore,

    add this to the custom css of the Tempera Settings (or modify the css file of your child theme accordingly):

    #content img.alignleft:hover, #content img.alignright:hover, #content img.aligncenter:hover, #content img.alignnone:hover, #content .wp-caption img:hover {
        opacity: 1;
    }

    (it's set to 0.8 in the base css for hovered images)

    Note: try to use the development tools of Firefox/Chrome/Safari, it's really easy to use and provide a bunch of useful informations...

  3. Savange
    Member
    Posted 2 months ago #

    Hi Angel-Grafik,

    I have the same problem, but I don't understand where I have what to change or where I have to add the parameter exactly. Could you help?

    Thanks!

  4. Angel-Grafik
    Member
    Posted 2 months ago #

    Hi Savange,

    add the code in the textarea "Custom CSS" in the section "Miscellaneous Settings" of the Tempera Settings page...
    (or add it in the css file of your child theme)

  5. Savange
    Member
    Posted 1 month ago #

    Hi Angel-Grafik,

    thanks so much, it works! :-)

    Regards

  6. Mongoid
    Member
    Posted 1 month ago #

    Hi Folks,

    I am having the same issue. I have updated the CSS code as above

    #content img.alignleft:hover, #content img.alignright:hover, #content img.aligncenter:hover, #content img.alignnone:hover, #content .wp-caption img:hover {
        opacity: 1;
    }

    and its not working for me. On the pages I have created there are no links on any of the images and it would be less distracting if the images did not fade when a mouse is passed over them. My images not only appear to fade but also to move slightly when the mouse passes over them. I would just like the image to be an image :)

    The test site is here

    Thanks in advance for any suggestions. I'm sure the problem is with the interface between the chair and the keyboard.

    Mongoid the Tater

  7. Mongoid
    Member
    Posted 1 month ago #

    Hi folks,

    Update:

    Copied this section from the default CSS and changed values for transition, opacity and filter:alpha.

    #content img.alignleft,
    #content img.alignright,
    #content img.aligncenter,
    #content img.alignnone,
    #content .wp-caption img {
    	-moz-transition:none;
    	-o-transition:none;
    	-webkit-transition:none;
    	transition:none;
    	opacity:1.00;
    	filter:alpha(opacity=100);
    }
    
    #content img.alignleft:hover,
    #content img.alignright:hover,
    #content img.aligncenter:hover,
    #content img.alignnone:hover,
    #content .wp-caption img:hover {
    	opacity:1.0;
    	filter:alpha(opacity=100);
    }

    This stopped the fade and the "movement" I was seeing during the hover.

    Thanks for pointing me in the right direction.

    Tater

Reply

You must log in to post.

About this Theme

About this Topic