Support » Theme: Tempera » Remove image fade on hover

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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…

    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!

    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)

    Hi Angel-Grafik,

    thanks so much, it works! 🙂

    Regards

    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

    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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Remove image fade on hover’ is closed to new replies.