index resources tutorials facebook hosting credits ov
09/24/18 ❤ 1 halloween brush pack ❤ 6 thin halloween border psds ❤ 3 thick halloween border psds ❤ 11 halloween bg psds ❤ 7 halloween deco psds ❤ 2 halloween vector psds 08/27/18 ❤ 15 border psds ❤ 14 deco psds ❤ 5 stylesheets ❤ 3 text psds ❤ 2 brush packs ❤ 8 rebought brush packs ❤ 4 vector psds ❤ 45 color schemes ❤ 2 trippy psds ❤ 3 background psds ❤ 10 photoshop tutorials ❤ 1 coding tutorial ❤ 15 textures ❤ 1 Janel cutout ❤ 7 Julia cutouts ❤ 3 Nicole cutouts ❤ 7 taylor cutouts ❤ 2 taylor m cutouts ❤ Tons of revamping ❤ New layout! 00/00/00 ♥ old updates get deleted

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.


    stats

    ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
    ★ Owner: Kayla
    ★ Opened: 06/09/17
    ★ Program: Photoshop CC 2018
    ★ Version: 5
    ★ Started Sw: 2005ish
    ★ Host: Shanna
    ♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡

    affies

    celestial lemieuxx everafter penumbra ethereal cinnamon you? mintleaf lamdesigns dollface unbreakable mascara sugarpie you? nutshell lvlysummer southie nakedly carousel cloudless you? seasalt sweetshock astra girlycute exorcism loveiszero you?