Main page Images under mouse hover behaviour

  • Is there a quick way to reverse the behaviour of posts featured images on home page? Currently they’re a bit dull and get lighter under mouse cursor. I’d like it reversed, so the thumbnails are more colourful and grab attention, then fade out a bit when the mouse is over them.

    I can’t find it in the theme dashboard.

    • This topic was modified 4 years, 7 months ago by jamespond.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Check out which css name these images have – I think by a quick watch it could be the class “featured-image”.
    Then change/overwrite the css for it via custom css.
    The function/part in the “featured-image”-class which changed the look might be the
    -webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease

    (or something like that, sorry, I am not a profi but maybe this quick helps you to find the nessessary part).

    Some examples how images can transform by using such a css filter function are at https://codepen.io/vladimir-simovic/pen/QXGwEW

    • This reply was modified 4 years, 7 months ago by kiezkickerde.
    Theme Author Ben Sibley

    (@bensibley)

    Hey there,

    This CSS should do the trick:

    .excerpt {
  opacity: 1;
  transition: opacity 0.2s;
}
.excerpt:hover {
  opacity: 0.9;
}

    Please copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

    Hm. With this code the text of the excerpt changed the opacity, too – not just the image. Is there a way to change it just on the image?

    • This reply was modified 4 years, 7 months ago by kiezkickerde.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Main page Images under mouse hover behaviour’ is closed to new replies.