Simple 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

The background-repeat property sets how a background image will be repeated. It is used in conjunction with the background-image property. We can repeat the background image along the horizontal axis, vertical axis or not repeat it at all.

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

Syntax

background-repeat: value; 

Property Values

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 in CSS. 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 with being completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between will partially mask 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 using 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 of a camera out of it.

You can view the source code here.

3. Zoom on hover

A zoom effect on images when users hover over them makes the web pages more attractive. This kind of effect can be used in galleries, selling products where you need to enlarge the image so that customers can have a better view.

The CSS transform property is used for enlargemnet of images with your preffered scale amount. It provides a way to control animation speed when changing CSS properties.

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 out on hover.

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 the axis on which scrolling occours 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, 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 to it. 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 below example shows, how the text is wrapped around the image using the circle function.

You can view the source code here.

You can read the original blog source from blogs.nimritee.com.