CSS img syntax / translateX

• 

  kerin2014 · Member · Oct 14, 2014 at 10:58 am

  • Copy link
  • Add topic to favorites

  I added a small image in the upper left part of my blog.

  Now I want to move this image horizontally 30% across the the top part of the screen on a hover event.

  However, I want only this background image to move, not the entire header-wrapper area — as is currently the case.

  How do I target the thumbnail image for a translateX transform, while leaving the rest of the header-wrapper area in place?

  .header-wrapper {
  	background-image: url('//needlepointlandstore.files.wordpress.com/2014/10/needle3.png');
  	background-repeat: no-repeat;
  }
  
  .header-wrapper:hover {
  	transform: translateX(30%);
  	-webkit-transform: translateX(30%);
  }

  As always, many thanks!

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

• 

  kerin2014 · Member · Oct 14, 2014 at 12:46 pm

  • Copy link

  I was actually able to solve this problem using pseudo elements.

  .header-wrapper::before {
  	content: url('//needlepointlandstore.files.wordpress.com/2014/10/needle3.png');
  	background-repeat: no-repeat;
  }
  
  .header-wrapper:hover:before {
  	transform: translateX(100%);
  	-webkit-transform: translateX(100%);
  }

  Now I have a nice new area in the header where I can do transform and add pseudo text context etc.

  However, this gave rise to a new problem. The scroll window to the right in the header — in Chrome only — overlaps some of the Menu options, rendering them unclickable. This does not happen in Moz or Safari, as I was able to adjust the top and right parameters to center and push down the window.

  Really annoying how you constantly have to account for these minor differences between browsers, such as scroll direction in Safari being the reverse of that in Moz and Chrome, and not being able to target browsers in your CSS code (you can in WP.com with the help of plug-in).

  At any rate, I will now try to solve this Chrome-specific issue with regarding to positioning the scrolling window. Padding-top does not work, as it affecst the img element’s size, not it’s position.

  As always, any hints welcome!

• 

  kerin2014 · Member · Oct 14, 2014 at 1:37 pm

  • Copy link

  Solved it. A few tweeks on the top parameter did it. Plus I forgot to keep in mind that the site looks a little different when I log out of WP from my browser, due to the bar WP puts up there when one is logged in.

  I think I may be starting to get the hang of this CSS thing!