Enlarge an image by clicking it (HTML5 and CSS3)?

Asked

Viewed 11,918 times

2

I have a problem, in smartphone css3’s Hover is not recognized (or better, it takes about 5 seconds to be recognized), and I wanted to make an interactivity with the photos of my app, as I can not use the Hover I’m lost, I don’t know what to do, but the solution would be to enlarge the image (or make other effects) when the user clicks/presses (n)it.. But I don’t know how to do it, I tried a little using Jquery but I couldn’t, I won’t post code because I don’t have it.. I can put the photo anyway, whether as image or background.

html5 css3

  • Hello, what code are you using?

  • for this none, I just assembled a template page with html, css style and two javascript, one for the menu and one for a back to top button, besides jquery completeness.. So with everything ready I put the image and try to make this effect, I was using the -webkit-transition: all .4s ease-in; and the -webkit-transform: scale(1.5); for transition and scale respectively worked only with Hover (with a bug), but for smartphone I need to use when clicking, hence the confusion came, I tried to do the same with the menu but did not give..

3 answers

2

You can do it using jQuery’s Animate, as in the example I created

EXAMPLE HERE

1

There are tools ready for such as Lightbox or Fancybox. Or even you can download the source code of one of these solutions, study and develop your own solution. You can also use a thumbnail with link to the large size image (in a simpler way).

1


Friend search for this css property phocus and also for keyframes these two links are well explained you can join with each other and have the effect you want because the property :focus and activated with the click and you can thus mix the click action :focus with the keyframe

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.