Hover effect

zenpanda

Hey guys, just want to say thanks again the awesome wordpress theme and for the great support answering my questions. I having difficulty with the theme hover options. Is there an option for Hover effect type to be OFF or none? It seems all of the options available darken and shade/opacity of the picture. This is aweful for iphones and androids when scrolling through portfolio page, it darkens every object that is being pressed on, engaged with. Its ok on a computer but does not work well on a phone. Please help me fix this. As such I edited the stylesheet css file and found and changed the following code. I just chose a random effect option, in this case 'classic' and took out the opacity change. But then I noticed another problem, the scaling of the image to 1.1 actually seems to BLUR the picture? At first glance it upscales just fine but after a second it resolves to a blurry image. Odd? It doesnt seem to do that with the shift effect after I took off the oacity issue for instance.

* classic effect */
.classic-eff:hover figcaption{
background-color: rgba(0,0,0,0);
}
figure.classic-eff:hover img{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
---------------

Air

Hello there:-)

It seems I can't recreate your issue. Can't you post link to page where I can see how it works?

Maybe you have other idea how I could help you in this situation?

With kind regards.

zenpanda

Yes its easy, goto your own live website template on your webpage and goto a page like 'gallery no description' and browse on a android phone like the samsung galaxy s5 you should see the issue. As you are scrolling down through pictures, if you hold down on the touchscreen for too long, maybe a 1 second, hover effect initiates, turns photo dark and shrinks image. I dont want images to 'deselect' or 'dim' when hovering over or viewing. That seems opposite of what viewer wants, they want to SEE the photo.

So if there's an option to do hover effects without going darker that would be great. If not then how do I properly hack the code to do this as mentioned in my first post. Thank you for your help in this matter! I love the template, just having some tricky issues in its functionality. Cheers!

-Steve

Air

I don't know if you will be happy with this effect, as this is not possible to distinguish if you are on phone or not, but you can use custom CSS to disable hover for classic effect:

.classic-eff:hover figcaption{
	background-color: rgba(0,0,0, 0);
}
figure.classic-eff:hover img{
	-webkit-transform: none;
		-ms-transform:  none;
			transform:  none;
}
figure.archive-item.classic-eff h2,
figure.archive-item.classic-eff .album-categories,
figure.archive-item.classic-eff .excerpt{
	opacity: 0;
}
figure.archive-item.classic-eff:hover h2,
figure.archive-item.classic-eff:hover .album-categories,
figure.archive-item.classic-eff:hover .excerpt{
	opacity: 0;
}

Or instead of global style, we can target small width devices with something like this:

@media only screen and (max-width: 700px) {
.classic-eff:hover figcaption{
	background-color: rgba(0,0,0, 0);
}
figure.classic-eff:hover img{
	-webkit-transform: none;
		-ms-transform:  none;
			transform:  none;
}
figure.archive-item.classic-eff h2,
figure.archive-item.classic-eff .album-categories,
figure.archive-item.classic-eff .excerpt{
	opacity: 0;
}
figure.archive-item.classic-eff:hover h2,
figure.archive-item.classic-eff:hover .album-categories,
figure.archive-item.classic-eff:hover .excerpt{
	opacity: 0;
}
}

With kind regards.