5 Useful CSS tricks with images

This article shares some of my most pleasing moments of learning CSS, I hope it's the same for you as well.

CSS is an abbreviated form of Cascading Style Sheet. It is used to describe how HTML elements should be displayed. CSS can not only provide colors, positions to the HTML elements, etc., but it can also create animations and enhance your web page. It's totally worth to know some useful tips and tricks which will help you to create amazing web pages.

1. background-repeat

By default, a background-image is repeated both vertically and horizontally.

Syntax

background-repeat: value; 

CSS Example

body {
    background-image: url("images.png");
    background-repeat: repeat;
}

You can view the source code here.

2. mask-image

Let's say you want to use an image, but only want to show certain parts of it. You can achieve this using the mask-image property. CSS masking allows us to define a mask shape which is then applied to the image. Anything that comes outside the mask shape is cut out, and the rest is displayed. It is pretty much works the same as masking in Photoshop.

Anything that’s 100% black in the image mask will be completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between will be partially masked in the image.

Masking can be performed in two ways, Masking using Gradients and Masking with images.

CSS Example - Linear Gradient Masking

#masked{
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
mask-image: linear-gradient(to bottom, transparent 5%, black 75%); 
}

In the above image, 1st part is the original image and second part is masked image with linear-gradient.

CSS Example - Radial Gradient Masking

 #masked{
-webkit-mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
 }

In the below image, 1st part is the original image and second part is masked image with radial-gradient.

CSS Example - Masking with Images

#masked{
-webkit-mask-image: url(https://images.png);
mask-image: url(https://images.png);
}

In the below example, a background image is used to mask an image in the selected camera cutout shape.
You can view the source code here.

3. Zoom on hover

The CSS transform property is used for enlargemnet of images with your selected scale amount.

Syntax

transform: scale [transition-duration] [transition-timing-function] [transition-delay];

CSS Example

img:hover {
   transform: scale(1.1);
}

In the above example, the image zooms in on hovering.

You can view the source code here.

4. scroll-snap-type

CSS scroll-snap-type property allows the developer to create well-controlled scroll experiences. This property can be used in the gallery section of the web-page. Page scrolling in CSS is contolled by setting a scroll-snap-type property on a container element. . The scroll-snap-type decides scrolling has to be done i.e. either x or y.

Syntax

scroll-snap-type: [none | x | y] [mandatory | proximity];

The mandatory means the browser has to snap to a snap point whenever the user stops scrolling. The proximity is less strict, it allows the browser to a snap point if it seems appropriate.

CSS Example

.y-scrolling {
     scroll-snap-type: y mandatory;
 }

The above example shows, scroll-snap-type along Y axis with mandatory value.

You can view the source code here.

5. shape-outside

shape-outside changes the shape of the items that are wrapped around it, instead of being restricted to a rectangular box.shape-outside allows to shape the content in order to fit the image.

The shape-outside property takes a basic shape and applies a shape function on the item. This property works only for floated elements.

Syntax

shape-outside: values;

Values

CSS Example

img{
   shape-outside: circle(85% at 10% 50%) border-box;  
}

The above example shows, how the text is wrapped around the image using the circle function.

You can view the source code here.