Sign in to follow this  
Followers 0

Image zoom

5 posts in this topic

Is there a way to add a zoom feature to images on a page? Maybe a plugin?

Share this post

Link to post
Share on other sites

Hi abuzzelli

You don´t need a plugin


I make this for you


You can write a HTML like

<div class="grow pic"><img alt="beach" src="" /></div>



and then add this CSS


.grow img {
  height: 700px;
  width: 300px;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;}
.grow img:hover {
  width: 1400px;
  height: 600px;}
You have examples in

Share this post

Link to post
Share on other sites

Let us know if the above solution works for you :-)


Thank you Batman

Share this post

Link to post
Share on other sites

Thanks batman! I appreciate the help. Only problem is it needs to happen automatically because my client needs to be able to add in photos herself without coding.

Share this post

Link to post
Share on other sites

Hi there, I don't think you'd be able to do that without the client having to amend the class or by adding a more complex filter into a child themes function.php.


It might be easier to use a plugin if you want it to be sitewide without the client having to edit anything etc, something like maybe?

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0

  • Similar Content

    • Edge-to-edge images
      By janpeeters+
      Hi, I have a container with on the left a 6 column image section and on the right a six column text section. I'm not succeeding in getting a edge-to-edge image on the left. Even with padding set to 0, there remains a white gap under and on the left of the image. So I'm researching if I'm overlooking something, if I've found something that could be improved in PL5 or if this is 'by design'?
      I've set site lay-out in settings to 100%. I've set pl-framework-base to 'full width'/'unwrapped'. (sidenote: in the end I want to have this 'read width' but for testing purposes I set it to full width. This might ask for an override function in the editor so people can always choose to full-width a section although other content is read width.) The images beneath show the settings and lay-out. 
      I've set all padding on the container to 0, but there remains a gap underneath the image and on the left. 
      I've done the same for the padding on the image.

      I've inspected this with Chrome Dev tools and it shows the following:

      I could create custom CSS to remove these spaces but for PL5 to be even more flexibleI I would think that being able to have edge-to-edge images without too much hassle would be a great feature. You see this a lot in recent webdesign. But I might be overlooking something and it is already possible. 
      I've done some testing with the Window Height setting. I think it would be great if images could fill their container edge-to-edge too with this setting active.
      I've tried to make the image taller but then the aspect ratio changes. A locked aspect ratio function would be great for this. With responsive designs images get cropped all the time so for me cropping would not be a problem. Keeping it's aspect ratio locked automatically or as a setting would be nice. I guess most designers wouldn't want it unlocked. 

      That's it, a whole visual story. I hope that it's clear what I'm saying if not let me know and I'll try to clarify. 
      Thanks, Jan
      (by the way, the current forum software you're using is really the best you've had. It works so easily, brilliant)
      There seems to pop an image at the bottom that I didn't put here, forget about the image below, it's already above.

    • Future Request
      By hibbsy78+
      One thing I'd really like to see asap is a gallery plugin the same as multigram in DMS. Actually I'd like to see Multigram replicated for instagram feed but also another version for standard media.
      I haven't found a plugin in wordpress that looks as good as this anywhere!
    • REVSlider Issue
      By jermainestegall
      Hello Danny,
      I've been experiencing problems this past week trying to add images to theREV SLIDER section of my wordpress site.  Once I upload an image, it's not visible within the DMS 2 template.  I can't see images in the media gallery or in the slider even when I refresh or clear the cache etc.  Is there something that's disabled now that was only available for 1 year?  I paid for the template.  Also, if I re-install the DMS 2 template will that help reset anything that may have become corrupt?
      Is this a function that only works for a limited time (1 year?)
      thanks again
      Jermaine Stegall
    • Editing the feature image thumbs on the blog roll
      By jDub
      I'd like to edit where the featured image "thumb" shows up on the blog roll.  I'd actually like to remove it from the blog article it's self and only have it show up on the blog roll aligned left with the text to the right of it.
      I'm fine with creating a child theme for this task, but am not sure which file would need adjusting (besides the css) to achieve this.  I'm hoping you can help.
      Thank you in advance.
    • Images in templates help
      By hrachovec
      I'm trying to achieve a simple design but it's proving difficult. I'm making a portfolio site where I have a piece of artwork appearing on top, with the WP post loop underneath. 
      Attached is the basic layout I'm trying to achieve.
      Each of these work samples are Posts in my Wordpress. The issue I have is that when I add a large image to Post A then go Post B, that Post A image appears on Post B. Guessing this was a template issue, I tried to create a unique template for each Post (which seems overly complicated but I couldn't think of how else to do this). But that approach doesn't fix the issue either. 
      When I'm on Post B and insert its unique image into the Media Box up top, if I go back to the Post A, that Post B image is up top where it shouldn't be. 
      I've tried unlocking templates so Post A and B are using their own template and are unlocked but they still seem to be connected because I get that image issue mentioned above. 
      I've also noticed that if I assign the Post A template to Post A, then if I go over to B, it's template has switch to A. Grr! 
      Post A:
      Post B:
      Confusing, I know. Any ideas of how to do this more easily?
      Thanks in advance, Russell