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's no way around 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!

Good afternoon. With this tutorial we continue our training on WordPress. And today we will look at how to set custom sizes for thumbnails in posts in WordPress.

Set arbitrary (your own, custom) thumbnail sizes

Open the functions.php file and at the end of the file write a comment that we are starting our custom code, and insert the code to register our thumbnail sizes:

// MY FUNCTIONS // Set thumbnails and thumbnail sizes for posts // add thumbnails to the theme if (function_exists("add_theme_support")) add_theme_support("post-thumbnails"); // Determine the size of the thumbnails if (function_exists("add_image_size"))( add_image_size("tie-small", 100, 55, true); //$width, $height, $crop add_image_size("tie-medium", 300, 150, true); add_image_size("tie-large", 600, 300, true);

Display custom thumbnail sizes in the template

IN in this example I'm using the twentytwelve theme. In this theme, regular posts are displayed using the content.php template. I'm opening this template. In it, the post thumbnail is displayed on the 20th line with the code:

We need to display our new thumbnail sizes. Let's replace this code above with the following:

I commented standard code thumbnail output, disabling it, and after it added the code for outputting your thumbnail, size tie-medium. Thumbnails are now displayed in posts given size tie-medium 300px X 150px.

Addition.

The procedure for working with thumbnails when creating a website/theme:

1. Determine what thumbnail sizes will be used on the site

2. Register the appropriate sizes in functions.php

3. Add thumbnails, if thumbnails are already set, then run the regenerate thumbnails plugin

4. Display thumbnails in templates

In this article we will look at the basics of working with Wordpress thumbnails. Let's learn how to activate thumbnail support with the Wordpress theme, add custom image sizes, and use thumbnails in Wordpress template. All this will make working with graphics much easier by automating the processes of creating and displaying images on the site.

Print version

Adding Thumbnail Support to WordPress

To be able to set images as thumbnails for WordPress pages, you need to enable thumbnail support in the template. To do this, add the following code to your theme's functions.php file.

If (function_exists("add_theme_support")) (
add_theme_support("post-thumbnails");
}

After this, when creating a page, a new block “Post Thumbnail” will appear in the right column.

To set a thumbnail for a post, just click on the link and select desired image, then click “Set Thumbnail”. In this case, you can select an image either from a common file library or upload it separately using a standard uploader.

After adding a thumbnail, the image you selected will be displayed in the corresponding block.

If the block for adding thumbnails does not appear on the page for adding/editing an entry, then go to the “Screen Settings” item in the right top corner next to the “Help” button and check the “Post Thumbnail” checkbox.

If this does not help, check that the thumbnail activation function has been added correctly.

Thumbnail Feature in WordPress

To display thumbnails in a WordPress theme, use special function the_post_thumbnail(). It is used inside WordPress cycle and can take two parameters – the thumbnail size and an array of attributes.

The_post_thumbnail($size, $attr);

• $size – the name of the thumbnail (standard thumbnail, medium, large, full) or an array containing the width and height of the image, for example, array(64, 64). You can also pass as a value the name of thumbnails with arbitrary sizes created using the add_image_size() function.
• $attr – array of attributes. For example, to set a class for an image, just write array(‘class’ => ‘thumb-class’). Since other parameters are used very rarely, we will not consider them. You can read more about all the meanings in the WordPress code.

Code for displaying thumbnails of different sizes

The_post_thumbnail(); // Parameter is passed -> "post-thumbnail"
the_post_thumbnail("thumbnail"); // Default size: 150px x 150px max
the_post_thumbnail("medium"); // Default size: 300px x 300px max
the_post_thumbnail("large"); // Default size: 640px x 640px max
the_post_thumbnail("full"); // original size of the uploaded file
the_post_thumbnail(array(100,100)); // Custom size (100px x 100px)

Example of ready-made code for displaying thumbnails in a WordPress template

As an example, let's look at the code that displays a thumbnail link to large image. This is especially useful if your site uses pop-up images. Since writing out the code separately is quite inconvenient, next to each line there will be a comment with explanations.

if (has_post_thumbnail()) ( /* Checking for a thumbnail attached to a post */
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), "large"); /* Get a link to a large image */
echo ""; /* Generate a link to a large image using CSS classes and the Title attribute */
the_post_thumbnail("thumbnail", array("class" => "single-thumb")); /* Display a thumbnail with the single-thumb class */
echo ""; /* Add a closing tag for the link */
) else ( /* If the post does not have a thumbnail */ ?>
" title="!}" >
/images/noimage.jpg" width="180" height="180" alt="No image" /> !}

Resizing thumbnails

By default, the sizes of standard thumbnails can be changed directly through the site's administrative panel in the Settings - Media files section. These include thumbnail, medium and large thumbnails.

Additionally, you can change/set the size of the post thumbnail output by the_post_thumbnail() function using the set_post_thumbnail_size() function, which must be added to the functions.php file:

Set_post_thumbnail_size($width, $height, $crop);

• $width – thumbnail width in pixels (default: 0).
• $height – thumbnail height in pixels. (default 0).
• $crop – crop or reduce the image. true - part of the image with the specified dimensions will be taken, false - the image will be reduced proportionally, and all excess will be cropped (default: false).

Adding thumbnails with custom sizes

If standard thumbnails are not enough for you, then, if necessary, you can create additionally any number of thumbnails with arbitrary sizes. To do this, use the following function, which you will need to add to the functions.php file of your WordPress theme.

Add_image_size($name, $width, $height, $crop);

• $name – name of the thumbnail.
• $width – width of the thumbnail in pixels.
• $height – thumbnail height in pixels.
• $crop – crop (true) or reduce (false) the image (false by default).

Example:

If (function_exists("add_image_size")) (
add_image_size("my-thumb", 180, 210); //180 wide and 210 high
}

In this case, when you upload an image, WordPress will additionally create another image file with a maximum size of 180 px wide and 210 px high. Fitting is always carried out on the larger side. For example, if the original image was 500x1000 pixels in size, then the thumbnail will be 105x210 pixels in size.

Using Custom Thumbnails

Using custom-sized thumbnails is no different from using standard ones. The only difference is in the name of the miniature.

The_post_thumbnail("my-thumb");

The above code will display the my-thumb thumbnail created using the code just above. Thumbnails with other names are displayed in a similar way.

This concludes this article. Good luck to you and success in creating websites!

I use this technique with pictures on my blog. When the user hovers over the thumbnail of any post, it gradually enlarges. Agree, it’s not bad at all and looks beautiful.

And this is done only using CSS3, and quite simply. Now I will tell you how to do this.

You can see how it works in the demo and on my blog on the main page.

Smooth image enlargement on hover using CSS3 only.

HTML

First, we need to prepare a simple html markup for our pictures, in this case we will have 3 of them.

As you can see, all pictures have an image class to which we, in fact, will set parameters.

CSS

And here's what the styles look like:

Image ( overflow:hidden; width: 380px; height:250px; )

We created a regular block of 380 by 250 pixels. This block should be the same size as the image (in our case 380 by 250). Accordingly, if your picture is larger or smaller, make the size of the .image block the same size as the picture.

And be sure to set the rule overflow: hidden; It is needed so that our image does not go beyond the block when enlarged.

Now we set the rules for the images themselves:

Image img ( -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; ) .image img:hover( -webkit-transform: scale( 1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);

The animation happens using a parameter in CSS3. The entire animation takes us one second. If you want the image to enlarge faster, reduce this value.

In the demo, the image is enlarged 1.1 times. If you set the value to 2, the image will double in size and so on.

That's it, friends. As promised, the lesson will be very simple. I hope you liked this simple effect for pictures. See you soon.

Registers a new image (thumbnail) size.

Registration means that WordPress, when loading an image, in addition to the basic dimensions, will create another file - a modified copy of the original with the specified dimensions.

In order to be able to define a thumbnail image for a post, you need to activate this feature with the function - add_theme_support("post-thumbnails"); in the template file functions.php.

When creating your own theme for the VI theme directory, the name of the new size must contain the name of the theme, . For example:

Add_image_size("mytheme-mini", 200, 200, true);

There are no hooks.

Returns

Returns nothing.

Usage

add_image_size($name, $width, $height, $crop); $name (string) (required) The name of the new image size. $width (number) (required) Thumbnail width (in pixels). $height (number) (required) Thumbnail height (in pixels). $crop (logical)

How to create a miniature?

false - scaling: the image will be resized to the appropriate side. The thumbnail is created along one of the appropriate sides: the specified width or height. The final image will not exactly match the specified dimensions.

true - cropping: the thumbnail is created exactly according to the specified dimensions. The most suitable side is selected, the picture is reduced according to it, and the excess part of the opposite side, which is not suitable in proportion, is cut off.

• array(X-coordinate, Y-coordinate) - indication of the cropping position, i.e. if you specify an array (array("right", "top")), then the image will be cropped from the specified positions.

crop only works for newly created images. If the site already has pictures and only then adds the size, then it will not be processed.

Default: false

Reserved size names

thumb, thumbnail, medium, large, post-thumbnail

The names "thumb" and "thumbnail" are aliases (synonyms) and refer to the same files.

You can also set the options for the thumbnail to be created via:

Update_option("thumbnail_size_w", 160); update_option("thumbnail_size_h", 160); update_option("thumbnail_crop", 1);

Examples

Let's add new thumbnail sizes

We register new thumbnail sizes by adding this code to the functions.php template file:

If (function_exists("add_theme_support")) ( add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // default post thumbnail size ) if (function_exists("add_image_size")) ( add_image_size("category-thumb ", 300, 9999); // 300 in width and no height limit add_image_size("homepage-thumb", 220, 180, true); // Crop the image)

Crop ($crop parameter)

#1 - false (scaling)

This line will tell WP that when uploading a new file, it needs to create a smaller copy of it. In this case, the thumbnail will be adjusted to fit the width or height, depending on which side fits best, and the opposite side will be reduced proportionally and most likely will not be larger than the specified size. For example, we have an original picture of 2500x1800 pixels, we make a miniature of 220x180 pixels. The image will be reduced to 250x180 px, i.e. the height will be 180, as we indicated, but the width will be higher than the specified 250 and not 220. In this case, the picture is not cropped and the reduced copy retains its entire proportions.

Add_image_size("homepage-thumb", 220, 180);

#2 - true (crop)

If you set the fourth parameter to true, the thumbnail will be reduced and cropped exactly to the specified dimensions. For example, we have an original picture of 2500x1800 pixels, we make a miniature of 220x180 pixels. The original will be reduced to a height of 180xp (then its width will be equal to 250px), and the width will be trimmed at the edges by 15px and as a result we will get a reduced copy: 220x180 pixels:

Add_image_size("homepage-thumb", 220, 180, true);

#3 - reduction on the desired side

To reduce the image along one of the sides we need, we need to specify a huge value for the opposite side. For example, we have a picture 2500x1800, we need to get a miniature 500x1800, then we specify it like this:

Add_image_size("homepage-thumb", 500, 9999);

#4 - Array(x, y) (cropping with position indication)

Since version 3.9 it became possible to specify the cropping position. Let's add the size of the thumbnail, which will be 220x220 pixels in size and will be a fragment from the original, which will be taken from the upper left corner (left, top):

Add_image_size("custom-size", 220, 220, array("left", "top"));

X_position can be: "left" "center" or "right".
Y_position can be: "top", "center" or "bottom".

Using new sizes

We have registered 3 sizes different from the basic ones: post-thumbnails, category-thumb, homepage-thumb. To now use these sizes (display pictures in the template), you can use the following functions:

Featured image

To use the new size when displaying an image set as the “Featured Image” of a post, you need to use the the_post_thumbnail() function in the template file:

If (has_post_thumbnail()) ( the_post_thumbnail("category-thumb"); // category-thumb - size name)

New size in the selection of sizes when inserting a picture (admin panel)

To add a new size to the size selection when inserting an image into a post, you need to use the image_size_names_choose filter hook, in which you need to add a size and specify a clear name for it:

Add_filter("image_size_names_choose", "my_custom_sizes"); function my_custom_sizes($sizes) ( return array_merge($sizes, array("category-thumb" => "My size",)); )

For main media files (PHP/Templates)

You can also display images (by size) directly from the WordPress library by image ID. To do this, use the wp_get_attachment_image() function:

// It is assumed that you have an image with ID 42 in your library... echo wp_get_attachment_image(42, "category-thumb");

If we need to get only the URL of the image and not a ready-made tag , then use the wp_get_attachment_image_src() function.

Plugins

Regenerate Thumbnails - This plugin allows you to create new dimensions for each uploaded image. Useful when you have changed or added new thumbnail sizes (via Settings > Media) while there are already downloaded images in the library. Or when you resize the "Featured Image" of a post.

Force Regenerate Thumbnails - deletes previously created sizes and creates new ones based on the current settings.

AJAX thumbnail rebuild - allows you to rebuild thumbnails. Useful if you used the add_image_size() function when you already have images loaded. (It's a slow plugin, but it doesn't suffer from out-of-allocated memory errors.)

1. Simple Image Sizes - allows you to create new thumbnail sizes directly from the Media panel. He can also recreate miniatures. It adds new sizes to the post selection so you can insert new sizes into posts. You can choose which sizes you would like to recreate and for which types of posts you need to do this.