Can the hover animation be disabled in Museum theme?

• 

  juliemcleod · Member · Jan 29, 2015 at 3:31 pm

  • Copy link
  • Add topic to favorites

  I’ve just switched my blog to the Museum theme. I’m not even sure what this feature is called, but on the main page the images zoom a touch when hovered over with the mouse. It’s not active on the blog pages themselves. I would like to know if there is a way to disable it with CSS. Thanks!

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

• 

  staff-happychia · Staff · Jan 30, 2015 at 9:03 am

  • Copy link

  Could you try this CSS:

  .blog .hentry .entry-image img, .archive .hentry .entry-image img {
      transform: none;
  }

• 

  juliemcleod · Member · Jan 30, 2015 at 12:36 pm

  • Copy link

  Thank you for the assistance. That gets me almost there. That stops the “animation” of all the smaller images on the main page but not for the latest image (the one that appears largest). Anything else I can add?

• 

  staff-happychia · Staff · Jan 30, 2015 at 10:52 pm

  • Copy link

  Oops, I hadn’t noticed there’s one main image at the top :-)

  Please remove the previous style and use this :

  .blog .hentry .entry-image img,.archive .hentry .entry-image img, .blog.home:not(.paged) .hentry:first-of-type img, .archive.home:not(.paged) .hentry:first-of-type img {
      transform: none
  }

• 

  juliemcleod · Member · Jan 30, 2015 at 10:59 pm

  • Copy link

  Thank you! That worked. :)

  I’m very new to this and am puzzled by something in your replies. When I look at your first reply and your second reply, they look identical to me. But when I copy/paste the second reply, it is different. Why would that happen?

• 

  staff-happychia · Staff · Jan 30, 2015 at 11:06 pm

  • Copy link

  The second style has an additional selector:
  .blog.home:not(.paged) .hentry:first-of-type img, .archive.home:not(.paged) .hentry:first-of-type img
  to hide the “animation” on the main image.

  The previous CSS has only one selector for the smaller images.

  So we are telling browser to don’t apply any transformation (transform:none;) on main image AND small images.

  If you wonder how I came up with that long selectors, I certainly did not hand roll them :-)

  I follow the steps in the An Intro to CSS: Finding CSS Selectors and use browser inspector to see what selectors are being used.

  If you are keen to learn CSS, start here: An Intro to CSS, or How to Make Things Look Like You Like

• 

  juliemcleod · Member · Jan 30, 2015 at 11:12 pm

  • Copy link

  Thank you. I’m really grateful for your help. Have an excellent weekend!

  I will investigate the resources you shared.