WordPress.org

Forums

Tempera
Remove image fade on hover (7 posts)

  1. moojomoore
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 year ago #

    Hi Angel-Grafik,

    thanks so much, it works! :-)

    Regards

  6. Mongoid
    Member
    Posted 11 months 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 11 months 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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic