-1

http://www.noor-azmi.com/element/projects.html

When u hover the thumbnails , text will appear.

This works just fine in all browser except safari

Can anyone help ? Thanks!

imja86
  • 39
  • 1
  • 4
  • Questions seeking help ("**why isn't, or how to make, this code working?**") must include the desired behavior, a _specific problem or error and the shortest code necessary_ to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Asons May 26 '17 at 16:44

1 Answers1

-1

you should add -webkit-transform: translate(-50%,-50%); to .middle and it will work .

also one suggestion : ( i might be wrong about this )

you are using @media (-webkit-transform-3d) which is a non standard feature and as MDN says

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

you should use @supports instead, which has the following syntax

@supports <supports-condition> {

<group-rule-body>

}

P.S. never link to external websites, but instead post your code here and replicate the problem . questions like yours are very easily downvoted and closed

Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Thanks, I am quite new to stack overflow so i dont know much regarding the rules – imja86 May 22 '17 at 18:08
  • Hi, but when in safari when i hover the image will have an underline and also in IE when hover the text is blue . Why is that ? It does not have problem in firefox and chrome – imja86 May 23 '17 at 05:29
  • I also just found out that it does not work in IE.... any suggestions how to make it work in IE ? – imja86 May 23 '17 at 06:18
  • http://caniuse.com/#feat=transforms2d . //-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform. // see here for more info https://stackoverflow.com/questions/18969621/css-transform-not-working-ie – Mihai T May 23 '17 at 10:08
  • My rule also have unprefixed transform. Why does it still does not work in IE ? – imja86 May 25 '17 at 02:46
  • as i told you in my answer. do not use @media (-webkit-transform-3d) . this ` -webkit-transform-3d is a non-standard boolean CSS media feature whose value indicates whether vendor-prefixed CSS 3D transforms are supported or not. This media feature is only supported by WebKit and Blink. The standards-based alternative is to use a @supports feature query instead. ` – Mihai T May 25 '17 at 08:24
  • While this might answer the question, linked resources is no good to base answer upon. As soon as that link dies so will the value of this answer and question. I suggest you wait and post answers until there is a proper written question. – Asons May 26 '17 at 16:49