Smooth image zoom on hover using pure CSS3. How to Change WordPress Thumbnail Size and Position. Code for displaying thumbnails of different sizes

A fairly common practice on modern websites is to smoothly enlarge a block with an image. How to do this with using CSS?

Smooth image zoom on hover CSS

We divide the solution of the problem into two stages: HTML markup and css styles. First, let's mark the blocks with images inside:

All blocks were assigned the box class. One of its important properties will be overflow: hidden, that is, hide everything that goes beyond the block. Shall we enlarge the image? Yes. But only the part limited by the block will be visible.
We sorted this out. Let's move on to the description of styles.

Box (
overflow:hidden;
width: 250px;
height:250px;
}
Everything is as stated - square blocks, similar in size to the standard, not enlarged image, then also 250 by 250.
The overflow:hidden property, as mentioned earlier, does not allow it to go beyond the boundaries of the block when zoomed in.
Properties related to images:

Box img (
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Box img:hover(
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
There is no way to do this without CSS3. All modern browsers the animation will be displayed. You need the transition and transform parameters. We set the animation time to 1 second (1s). The increase will be 1.2 times. You can change it to your taste.
Now for example work!

A fairly common practice on modern websites is to smoothly enlarge a block with an image. How can you do this using CSS?

Smooth image zoom on hover CSS

We divide the solution of the problem into two stages: html markup and css styles. First, let's mark the blocks with images inside:

Box img (
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Box img:hover(
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
There is no way to do this without CSS3. All modern browsers will display the animation. You need the transition and transform parameters. We set the animation time to 1 second (1s). The increase will be 1.2 times. You can change it to your taste.
Now for example work!

Today I want to look at how to enlarge an image in CSS. This can be done, for example, by pointing at it, and the increase itself can occur smoothly or sharply. And all this can be done in different ways.

Simple sharp increase

To change appearance image when hovering over it, we will use the hover pseudo-class. The method is to simply change the width of the image. When you change the width, the height also automatically changes. For example, the width of our virtual image is 320 pixels. Let's zoom in a little:

Img:hover( width: 380px; )

With this approach, the height also increases, but all this happens abruptly. You can also set the second parameter - height, but then you can upset the proportions of the picture.

Smooth increase due to transformations

Now we will look at a completely different method. Firstly, resizing will occur smoothly. Secondly, instead of changing the width, we will use transformations - this is a css3 innovation.

To activate smooth transition, you need to add a transition property to the picture itself (not the hover picture). It must indicate the time during which the transition must be made. You can also add other parameters, but I won’t go into detail on that today.

Img( transition: 0.4s; )

We tell the browser that style changes for elements with the img tag should not occur abruptly, but should be spread out over a period of 4 tenths of a second. Great, all that remains is to do the transformation itself when hovering over the image:

Img:hover( transform: scale(1.15, 1.15); )

Enlarging elements is done using the transform property and its scale value (increase horizontally, vertically). So if you want to enlarge the image proportionally, both values must be the same. Set values based on the fact that 1 is normal size Pictures.

Accordingly, in the entry above, when hovering, we enlarge the image by 15% on each side and this happens smoothly.

So to resize you can use either resize or transform. These two methods have differences. If you resize using width , the image enlarges and moves all the content that is near it. This does not happen in the case of transformations.

Resizing on one side only

If you need to enlarge an image in CSS when hovering on only one side, then this is also easiest to do using transformations. Just write it like this:

Img:hover( transform: scaleX(1.2); )

That is, after keyword scale we explicitly indicate the coordinate - X or Y .

The meaning of enlarging a fragment of an image

Surely you have already seen similar scripts installed on the websites of large online stores, when when viewing a product you can move your mouse over the image and at the same time the exact fragment of it over which the mouse cursor is located will enlarge this moment. This is very convenient when you need to study a product in detail, for example household appliances, Cell phones, watches, jewelry, whatever. At the same time, an unnecessary pop-up window will not open, which is quite convenient and now you will understand why.

The meaning of the method of enlarging a fragment of an image when hovering the mouse cursor is that the size of the detailed image can exceed the resolution of the user’s screen, for example, the resolution of the laptop screen from which the site is viewed is 1280x800, and the size of the detailed image is 1920x900. It’s clear that it won’t fit entirely on the screen, so to enlarge it, the classic method using a drop-down window is not suitable here. You need to either reduce the image to the size of the user’s screen, or scale it (it’s better not to do this), or use a trick and enlarge only part of the image. In this case, the site will look great on both large and small monitors, but the size detailed picture will be large enough for users to study it in detail.

Advantages and disadvantages

As we mentioned earlier, the main advantage of the script for enlarging not the entire image, but only part of it, developed by our studio staff, is its independence from the user’s screen resolution, but there are other advantages that can be highlighted:

ease of installation;
flexibility of customization;
minimum JavaScript size;
simple HTML markup;
compatible with jQuery of any version;
cross-browser compatibility;
suitable for different screen resolutions;
better than sophisticated analogues;
free;
a detailed description of the operating principle and easy-to-read source code.

As you can see, there are quite a lot of advantages and they are obvious. Yes, of course, you can download similar scripts or steal them from some large online store. This method, by the way, is called Cloud Zoom, which, in fact, is paid and too sophisticated. Now such scripts are widespread and used on many sites, but you will have to spend quite a lot of time to figure it out and integrate a similar script into your site. In this article, we will describe in detail the operation of our script, and if you consider that its code consists of only a few lines, then you will be able to understand the essence of the matter in just a few minutes.

If we talk about shortcomings, then only one point comes to mind, and calling it a shortcoming can be a stretch. The fact is that the enlarged image is loaded in the hidden layer in advance, even before the user clicks anywhere. We simply need this because when the mouse cursor is over the picture, we need the enlarged fragment to appear instantly, and for this we have to use preloading. But there is nothing wrong with this, since usually there will be only one such image on the page, and its size is not so large (200-300 KB with a resolution of 1800x1100 as in our example) to make it worth worrying about the user’s Internet traffic.

Development in detail, from A to Z

Well, now that we have briefly outlined the essence of the method, and also listed its advantages and disadvantages, it’s time to get down to business and start implementing it. I would like to immediately note that there is nothing complicated in this script and we hope that the algorithm will be completely clear to you the first time.

HTML markup

As always, we start with HTML markup pages. It is outrageously simple and contains only a few lines of code:

Everything here is elementary. First container with class preload, as the name suggests, is responsible for preloading a large image. We already discussed why this is necessary a little earlier. Inside this container you place the image that will be used when enlarging. Some points are important and should not be missed:

try to place this container as high as possible in the DOM (in the page code) - the higher, the faster the script will be ready for work;
hide container preload from the eyes of users, moving beyond the visible area of the screen ( display: none this will not work).

Next comes the container containing the preview. We assigned him a class zoomable, which, as you might guess, means that the picture can be scaled. The image it contains is displayed by default. There are several here too key points that should not be overlooked:

the container size must be specified explicitly (width and height equal to the preview dimensions);
the container should not contain scroll bars, and anything that does not fit in it should not be displayed (CSS overflow property);
when hovering, you can optionally change the mouse cursor to a non-standard one or, as in the example, to one of the suitable standard ones (in the form of a sight).

The important point here is to add custom attributes to small image:

data-preview-url(path to small image);
data-img-url(path to detailed image).

These attributes can be called whatever you like, that’s not the point. The main thing is that they contain absolute or relative links to the corresponding images. Why duplicate the path to a small image, you ask, when it is already indicated in the tag img. Don't worry, you'll understand this a little later.

CSS styles

The CSS looks quite simple and meets all the requirements listed earlier:

Preload ( position: absolute; z-index: -1; top: -5000px; left: -5000px; ) .zoomable ( cursor: crosshair; width: 600px; height: 368px; overflow: hidden; margin: 0 auto; )

Preload detailed image

As we mentioned earlier, preload We need a large image so that when the user hovers the mouse cursor over the preview image, our script is completely ready for work and there are no delays. Here are two main reasons why pre-loading a detailed image into in this case completely justified:

the detailed image must be cached in advance by the browser so that, if necessary, it can be instantly displayed on the screen;
For the script to work, you need to calculate the coefficient - the ratio of the size of the detailed image to the size of the preview (more on this later).

JavaScript function

Now everything is ready and we move on to the most interesting part - JavaScript, thanks to which all this will work.

So, let's get started and immediately bring entire working script, so that it is convenient to copy it, and then we will look at it in detail in parts:

$(window).load(function() ( $(".zoomable").hover(function() ( $(".zoomable img").stop().animate((opacity: 0), 0, function( ) ( $(".zoomable img").attr((src: $(".zoomable img").attr("data-img-url"))); )).animate((opacity: 1), 300 ); ), function() ( $(".zoomable img").stop().animate((opacity: 0), 0, function() ( $(".zoomable img").attr((src: $ (".zoomable img").attr("data-preview-url"))).css((margin: "0 0"));animate((opacity: 1), 300 )); var c = $(".preload img").width() / $(".zoomable img").width(); $(".zoomable").mousemove(function(e) ( var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top; var iX = pX * c - pX; ".zoomable img").css((margin: "-" + iY + "px -" + iX + "px"));

First of all, it is worth drawing your attention to the fact that this function called not after the DOM is ready, but after full load pages:

$(function() ( console.log("DOM is ready"); )); $(window).load(function() ( console.log("Page is ready"); ));

The point is that the standard $(function()()); it won’t work for us here, because if the structure of the document is ready, this does not mean that everything in it has been loaded multimedia files. And since it is very important for us to obtain the dimensions of a detailed image even before the script starts running, this decision is completely justified.

So, first of all, we handle the mouseover event on our image using standard function jQuery - hover() .

$(".zoomable").hover(function() ( ), function() ( ));

If the mouse cursor is over the container zoomable, we temporarily hide the image and quietly replace its attribute src(source), and then smoothly display it on the screen. In this case, there will be no unpleasant jumps and everything will go smoothly.

In the case when the mouse is not over the container zoomable, we perform the same operation, only now we return everything to its place as it was by default. This stage is the simplest part of our script and no one should have problems understanding it, so let’s move on.

Var c = $(".preload img").width() / $(".zoomable img").width();

This line of code calculates the coefficient required for our script - the ratio of the sizes of small and large images. This is necessary in order to perform accurate scaling, depending on where the user’s mouse cursor is currently located.

What follows is the last and most an important part our script, which is responsible for moving large image in the scalable layer. This creates an effect as if we are moving an imaginary invisible magnifying glass and exactly the fragment that is needed is shown in the window.

First of all, we need to catch the event of the mouse cursor moving, and to make the script work easier, we will not do this for the entire document, but only for the container zoomable. After all, we are not interested in mouse coordinates outside the target layer.

$(".zoomable").mousemove(function(e) ( ));

Now we need to calculate the coordinates of the mouse cursor relative to the left top corner screen. But we are interested in the location of the cursor relative to the element, and not the origin of coordinates, so we must immediately subtract the distance of the upper left corner of the container from these coordinates zoomable from the origin:

Var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top;

All that remains for us is to calculate and substitute the indentation values ( margin-top And margin-left) for a detailed image, in order to know how much to move it to achieve the effect of enlarging a fragment of the image. Because layer zoomable we have fixed dimensions, and everything that goes beyond its limits is not displayed, then the required effect will be obtained using negative indents:

Var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css((margin: "-" + iY + "px -" + iX + "px"));

An example of how the script works

As an example, we have chosen an image whose enlargement may be of interest to many. After all, you must admit that everyone is interested in reading what is written on the label of a bottle of champagne :)

P.S. Comments on the article and distribution of this script are welcome.

When changing the theme in WordPress, instead of thumbnails for existing records we sometimes see the original images. This is due to the fact that thumbnails of the required size were not created when the image was loaded, and using the Regenerate Thumbnails plugin this problem can be solved.

Image sizes

WordPress has the concept of “image sizes” of which there are only three by default - large, medium and thumbnail. When uploading images to your media library, WordPress creates new file for each size, i.e. If you look in the downloads directory, you will often see the following:

photo.jpg
photo-150×150.jpg
photo-300×126.jpg
photo-672×360.jpg

Here it is clear that original image photo.jpg three were created additional file for our sizes. The default dimensions in WordPress can be changed under Options → Media, and are used when inserting images into posts, creating galleries, and other places.

In addition to the default sizes, you can register in WordPress additional sizes using themes or plugins. For example, if a plugin displays a widget with popular posts in a sidebar, it can accompany them with 50x50 pixel images. Or a theme that displays posts in a grid might use 200x200 pixel images.

It is worth noting again that creating files various sizes occurs precisely at the moment of loading images into the media library.

Thus, when activated WordPress themes, which uses different sizes, files for those sizes do not exist for previously uploaded images. In such WordPress case will use the closest possible approximation of available dimensions or original images.

This often causes our designs to float or the thumbnails to float. home page sites weigh several megabytes.