To state up front, I am a beginning programmer. I needed to turn off the hover feature on my images for mobile devices, as it was creating issues when someone was scrolling down the page. I asked a programmer to do it on upwork.com and he successfully did it through CSS for the home page images.
However, I have now added some new images under different sections these new images have it enabled. Unfortunately, the programmer I used did not want to share how he did it, but rather wanted us to hire him again.
I figured it best to figure out how to do this on my own.
The page is foxandowlkids.com/index_postlaunch.html
You will see that the "The Features" image has hover on a laptop but turned off on mobile. How can I accomplish this with my "The Versatility" images? To be honest, not even sure which CSS file I should be looking in.
Any help would be greatly appreciated!
Lines 3478 and 3460 in /www/css/style.css are causing the effect. To disable it you could either wrap those declarations (including selectors) in a #media query or you could override them from a different file.
To modify them in place you could use:
#media (min-width:768px) {
.works-grid.hover-white .work-item:hover .work-img:after{
background: rgba(250,250,250, .9);
}
}
/* ... */
}
#media (min-width:768px) {
.work-item:hover .work-img:after{
background: rgba(20,20,20, .85);
}
}
However, I recommend the second option, to place your mods in a different stylesheet, loaded after style.css, because mods to style.css will be lost on theme update, (unless you're using a child theme, which doesn't seem to be the case). So here it is, the safer route, to be placed in your own stylesheet:
#media (max-width:767px) {
.works-grid.hover-white .work-item:hover .work-img:after,
.work-item:hover .work-img:after {
background-color: transparent;
}
}
There are chances you want to trade the 768px breakpoint for 992px if you want to include tablets in affected devices or for 540px if you only want to limit the change to (most) smart phones.
However, please be advised it is always a bad idea to allow unqualified code in production, as the chances of breaking things unknowingly are huge. As a general rule, paying a few bucks for something this small is always worth over the risk of breaking it on a different screen size or different device, which is quite high unless you understand what your code changes, when it applies and how you can test it.
Play on test environments all you want and use it to learn. But if you care about your website and your brand image in front of your clients, don't change things you don't understand in production, be it CSS, javascript or php. It's not a matter of if you'll break it, but when. Don't take my word for it. Ask any 10 or more developers of your choice, without any work relationship to you and see the answers.
On that particular site the trick seems to be to look out for that class in the <html> element. On normal screens, it has the class .no-mobile. For mobile devices, this changes to be .mobile.
Go through the css and look for stuff like this where there's a :hover state:
.work-item:hover .work-img > img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
Modify it so that there's a html.no-mobile selector in front of everything. This will let you only target screens that are not considered 'mobile.' The modified code might look something like this:
html.no-mobile .work-item:hover .work-img > img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
Please know that this will only work in your case because there's obviously a script somewhere that is checking for the type of device the user is using and updating the html class, which you can take advantage of.
Using pure CSS, you would need to write media queries and target specific device widths. Rewriting your effects might look something like this, which only targets devices with a screen size of 768px or larger:
#media (min-width: 768px) {
.work-item:hover .work-img > img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
}
Related
I have a link. When I am clicking on it an css-animation in a div-block should appear.
But as soon as Safari has detected that I want to go to that link he is stopping the animation and calling the site.
I also added a setTimeout() with a delay of two seconds to prove my assumption.
Animation runs for two seconds, then call the link and stops the animation.
I found nothing on the internet so for for this kind of problem. All other browsers working so far by pleasing my wish.
I know a gif would be an option, but I wanted to really make sure that my approach is not working at all. So I am asking you to be sure it's not my lack of knowledge here :-)
Any ideas how to achieve this?
In Safari when you use Keyframes you need to use the whole percentage:
this will:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
I'm using SCSS at the moment and that works wonderfully for giving me the ability to use variables and such, but it also gives me the ability to write functions which output the following if I gave it -90:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
I'm wondering if there are any staple engines that do this for all properties in CSS3, so you can simply write transform: rotate(-90deg) and at compile, it uses all the different properties that it can have, such as webkit, moz, ms, o and whatever other possibilities like filter: progid:DXImag..blah..mage(rotation=3); for IE also so it's all universal for browsers.
You should take a look at AutoPrefixer, which you can add to your build system and does exactly what you want. It can even add prefixes only for properties where it is still necessary based on Can I Use data.
Related to this question: Android Holo loading spinner in CSS I have noticed that the accepted answer's first example, the one with images, doesn't work on chrome (i just see a static grey ring) while it works on Firefox and IE 11.
Even though the purpose of the question was to make a spinner without images and both are very nice I find the first one slightly better looking (on firefox, that is) and i'd like to use it but I don't know why it doesn't work on chrome and I want to know if there's a fix, both for future references (so i know what to avoid and/or how to fix it) and to know if I must stick to the one without images
My Chrome version is 42.0.2311.90 (32-bit)
Since i assumed both spinners were correct i didn't realize it was missing the webkit-keyframes property. Today i watched once again the css and noticed by chance that the css spinner had it while the image-based spinner didn't. Adding this to the image based spinner css worked
#-webkit-keyframes rotate-outer {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(1080deg);
}
}
#-webkit-keyframes rotate-inner {
0% {
-webkit-transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
I'm making a website with a lot of css transform (rotate:45deg) but i have few issues with blurry text/images.
I did a jsfiddle with an example.
http://jsfiddle.net/4pjsh/
In Chrome, i added "hardware acceleration" to fix the blink/crappy effect during animations but images and text are now always blurry. I searched and tryed lot of things but can't find a way to have them clean.
In Firefox 27-, it works fine but since mozilla released firefox 28/29, when blocks are animating, images are blurry.At the end of the animation, they come back clean.
Somebody knows how to fix that? if it's possible...
Thanks
I removed all rotates, and "started over". Somehow I got rid of the blur in chrome at least.
http://jsfiddle.net/4pjsh/6/
So right now, I'm only rotating like this:
.gridd .item {
-webkit-transform: rotate(45deg);
}
.gridd .zonelogo img {
-webkit-transform: rotate(-45deg);
}
.gridd .item .blockMore p { //You don't need to be this specific
-webkit-transform: rotate(-45deg)
}
Sorry, only had time to do the -webkit ones :)
I'm trying to animate a sidebar and it seems to be working in all browsers except the android stock browser on my galaxy s3 (android 4.1.2).
I've looked around and it seems there's trouble with translate 3D and reading the end Animation trigger but that seems to be relevant for older versions of the browser.
To animate the sidebar I'm doing a 0 to 60% translation. Relevant css below.
transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-webkit-transform: translate3D(0,0,0);
transform: translate3D(60%,0,0);
-moz-transform: translate3D(60%,0,0);
-webkit-transform: translate3D(60%,0,0);
Never mind, it was a CSS issue. Be careful when you use the '~' CSS selector. I changed it to '+' and it worked. The actual animation is still laggy and flickers though but at least it works.