ZOOMING Images

• 

  persijs · Member · Apr 23, 2015 at 10:45 am

  • Copy link
  • Add topic to favorites

  I took the Code, “zooming images” from http://www.wpbtips uploaded and how it looks like.
  Carpets/Designe
  I want upload a lot of small ornaments of the carpets in small thumbnails with Zooming Images code.
  How to do? Does my theme accept it?
  Thank you

  The blog I need help with is: (visible only to logged in users)

• 

  galois · Member · Apr 23, 2015 at 11:50 am

  • Copy link

  I took the Code, “zooming images” from http://www.wpbtips uploaded and how it looks like.

  What is the correct URL? http://www.wpbtips/ isn’t correct/valid.

• 

  galois · Member · Apr 23, 2015 at 4:26 pm

  • Copy link

  I took the Code, “zooming images”

  Which code? Are you referring to this?

  Zooming images

• 

  persijs · Member · Apr 23, 2015 at 4:31 pm

  • Copy link

  1 Image to be selected. https://theworldcollection.files.wordpress.com/2015/04/mg_0009-6227-1.jpg

  2. – https://wpbtips.wordpress.com/2013/07/02/zooming-images/

  3. Code used <img src=”IMAGE URL HERE” alt=”DESCRIPTION HERE” class=”zoom ETC ETC” />

  take a look. http://www.theworldcollection.wordpress.com

• 

  galois · Member · Apr 23, 2015 at 4:35 pm

  • Copy link

  You need the Custom Design for that.
  See here:

  persijs – neither of the sites you mentioned has Custom Design.

  https://en.forums.wordpress.com/topic/background-color-for-a-page?replies=5#post-2203944

• 

  galois · Member · Apr 23, 2015 at 4:38 pm

  • Copy link

  And the instructions on WP Tips starts with

  Zooming images
  POSTED BY PANOS ⋅ JULY 2, 2013 ⋅ 5 COMMENTS
  If you have the Custom Design upgrade, you can easily create thumbnails that zoom to full size when you hover over them.

  CSS editor

  Add this:

  .zoom {
  width: 25%;
  -webkit-transition: width 1.4s ease-in-out;
  -moz-transition: width 1.4s ease-in-out;
  -o-transition: width 1.4s ease-in-out;
  transition: width 1.4s ease-in-out;
  }
  .zoom:hover {
  width: 100% !important;
  }

  Change the percentage, to adjust the default width for such thumbnails.

• 

  persijs · Member · Apr 23, 2015 at 4:39 pm

  • Copy link

  And how can I get this Custom designe?

• 

  galois · Member · Apr 23, 2015 at 4:43 pm

  • Copy link

  Go to Store
  https://store.wordpress.com/premium-upgrades/custom-design/

  and purchase it.

• 

  galois · Member · Apr 23, 2015 at 4:45 pm

  • Copy link

  Or go to
  https://theworldcollection.wordpress.com/wp-admin/paid-upgrades.php
  and purchase it.

• 

  pmciano · Member · Apr 25, 2015 at 5:56 pm

  • Copy link

  @persijs

  Custom Design is part of the WordPress.com Premium Plan.

  WordPress.com Premium includes the following upgrades:

  – Domain Name & Mapping
  – Space Upgrade
  – No Ads
  – Custom Design
  – VideoPress

  You can read more about each feature here:

  WordPress.com Premium [Redirects to Plans]

  If you have additional questions, please let us know.

• 

  galois · Member · May 8, 2015 at 9:30 am

  • Copy link

  @pmciano: As @persijs’s account is prior to September 1, 2014, @persijs can buy the Custom Design upgrade separately.
  That’s why I put that link.

  Cheers.

• 

  pmciano · Member · May 9, 2015 at 1:40 pm

  • Copy link

  @galois

  Correct. That is an option for the user, as well.

  @persijs

  To learn more about how CSS editing works at WordPress.com, see these helpful pages:

  http://en.support.wordpress.com/custom-design/css-basics/

  https://cssworkshop.wordpress.com/

  Also, if you have customization questions, please try posting to our CSS Customization forum:

  https://en.forums.wordpress.com/forum/css-customization

  When you create a CSS-related help request, please make sure to select or link to the WordPress.com site you’re working on and include a clear description of the change you’re trying to make.

  Let us know if you have any more questions.