I'm working on a portfolio site and want portfolio pieces to have a fancy rollover.
I've made a pen of what I have so far. My issue is that the Visit Site link isn't clickable. I have no idea why, but I think it may be something to do with the z-index change or the transition effect. It was working before when I used a simple slide-up over the image effect.
Any ideas how to get this link clickable?
Thanks!
just add
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
to .default-view and it works :)
Related
When I use transform: scale and change background of the div, I get artifacts (small traces) during the transition. I need to change size and background. It's easier to show than to explain :)
Please check the example here, the last dot https://jsfiddle.net/hades123/29dmx47o/2/
I can use box-shadow to hide it, but it's not practical because background of the loader can be different.
I'll be grateful if you help me!
Solution with box-shadow https://jsfiddle.net/hades123/8fmy70ub/1/
It's not so great but it's working fine.
If the size of the image is 200.51px there is no wiggle, but if it is 200.49px there is a wiggle due to the transformation matrix rounding. This is detailed in this article Chrome Font appears Blurry
An interesting thing though, is if I have an Embedly component on the page, the issue goes away. What is Embedly adding to the global css?
Before I try to implement something like the link demonstrates to fix my wiggle problem when doing transform: scale(1.1);, I would like to know if there is a more straightforward fix that can be added to my css, as it seems that Embedly is doing that.
Thank you for any insight in advance.
I've been trying to find where a hover transition has been added in a WP theme so I can customize/disable the effect but I can't seem to find it. Can you help?
The website is here: http://www.thisisutil.com/journal/ The effect I want to customize/disable is the hover effect on the post images.
I found this by starting at the image and keep adding hover attributes until I see it pop up.
Another tool that could help you is the animation drawer:
I am a newbie HTML developer and haven't worked on jQuery/CSS animations yet.
I have a question regarding the effect on the following link:
http://highline.huffingtonpost.com/miracleindustry/americas-most-admired-lawbreaker/
When page scrolls, the main image in header resizes (zoom out effect)
What is this animation, is it something Parallax or simply a CSS animation and how can I make this, any help would be highly appreciated.
You can do using CSS3 and JQuery Parallax..
check this sample
wondered if anyone can shed some light...
If you watch the video in full-screen mode on this page: http://singtonicity.com.gridhosted.co.uk/ you'll notice some elements float on top of the video (to view in fullscreen mode double-click the video whilst it's playing).
I am assuming this is to do with the classic iFrame/z-index issue but I just can't find away round this one.
I am wondering if it's anything to do with the default styling browsers give to iframes in full screen eg: iframe:-webkit-full-screen???
Any help is most welcome.
Thanks in advance
Richard
This is actually to do with the opacity and the animation you have. Try removing the fadein ease-in-out 1 CSS animation and check the result.
Take a look at this excellent article from Phillip Walton, should help clear a few things up: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I had such problem in Safari browser. Needed to remove will-change css property from parent element to fix it.