LOVEBLUSH.NET - 2020
★ Owner: Kayla
★ Opened: 06/09/17
★ Program: Photoshop CC 2020
★ Version: 13
★ Started Sw:
★ Host: Myself
★ Credits: x
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)
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
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
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.