01 02 03 04 05 06 07
★ Owner: Kayla
★ Opened: 06/09/17
★ Program: Photoshop CC 2020
★ Version: 13
★ Started Sw: 2005ish
★ Host: Myself
★ Credits: x
home content tutorials holiday contact ov

website image hover tutorial

Keep in mind that this image hover will be the hover of EVERY image you link on your website. It will default them all to this. This is mine before you hover

This is mine after you hover the image

and here it is live (if this one looks different than the pictures above than don't panic. It just means I changed the look of my my main previews lol)

the steps

1. This is legit my coding for mine. You need to change it to however you want YOURS to look. I'll explain some stuff below. Copy and paste this coding into your style.css page.

  • Delete this coding if you don't want the pattern/image to "move" like how mine does that scroll thing.
  • Delete the opacity: coding (or change it around) if you don't want your images to have a color fade, like how mine is lighter until you hover it.

  • Padding: this is the size of the area where the grey/pattern is at.
  • Margin: this is the space you want OUTSIDE of the image.
  • Border: this is the dark little border that's on the very edge of the image. It's kinda hard to see but it makes it pop more! Edit/delete it to your liking.
  • Background: #eee; this is the color of the little hover area BEFORE you hover it (the padding area basically). This area below:
  • Background: url(YOURURLHERE) put your hover image link where it says "yoururlhere."

  • If you want a color as the hover and not an image than replace background: url (YOURURLHERE) with background: #eee;

  • You can add/delete whatever you want.