search

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
http://ianlunn.github.io/Hover/
Other
29.25k stars 5.78k forks source link

hvr-border-fade issue #78

Closed MrJoshFisher closed 8 years ago

MrJoshFisher commented 8 years ago

Having a slight issue with hvr-border-fade as it doesn't seem to be on top of the image even tho Im using z-index 1;

you can see a faint blue shadow round the box but its not on top of the image, any ideas ?

screen shot 2016-01-28 at 4 08 57 pm
IanLunn commented 8 years ago

Could you provide a link please?

Does the element you have given z-index: 1 also have a position property? Is it possible the other element has a higher z-index? I can troubleshoot that if you provide a link.

MrJoshFisher commented 8 years ago

There are no other z-index properties Im using the hvr-trim on some other buttons on the same page and thats working fine, ill email you the details

IanLunn commented 8 years ago

The border on the hvr-border-fade effect is inset, meaning it will appear behind the image. Here's a solution:

.wpb_single_image.vc_align_center {
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
}

The .wpb_single_image containers in Firefox at least seemed too wide so width: 100% fixes that. Then, padding: 4px makes a 4px gap around the edge so the hover effect can be seen (change 4px to the same width as the border effect). box-sizing: border-box tells the browser to treat the padding as part of the width so it doesn't exceed 100% width.

screen shot 2016-01-29 at 09 57 18

MrJoshFisher commented 8 years ago

Cheers but if I increase the padding it just pushes the image in how would I make the border sit ontop of the image so that it would essentially go ontop of the boarder thats already there like the hvr-trim effect

IanLunn commented 8 years ago

You'd need to either make the image a background-image, position the image behind using negative z-index, or place the hover effect in a pseudo-element with a positive z-index.