Image styling

Basic styling of a image

With Border: you can give the image a border, or a border-radius: with this little thing you can make it look less sharp. And with the box-shadow: you can make the image less 2D and more 3D, This so the image will pop uit the screen more.

Styling a image as an polaroid

You can style images in al lot of different ways, to make the image not so boring you can make it look like a polaroid image like we did here, the image is made with a class="Polaroid" in the wrapper. And it uses a filter: grayscale(50%); to make it gray, and with hover we made it interactive.

For the polaroid you must make sure that it is rectangle by using /w:600/h:600 inside the url.

Adding text to a image with blur() and linear-gradient

we are adding text to a image, but to make it readable you can blur a section or use a gradient in a section of the image with blur() or we can use linear-gradient this creats a place ware the text is easy to read.

Styling a image with &:hover

You can add a lot to a image with &:hover you can make it more interactive for the users, and improve the experience on your website. But you can also add more information about the image when people hover over it.

Styling a image with svg mask

You can change the shape of a image with a Svg Mask you can shape the image to your liking, and make it fit the theme of the website.

to make the blob shape we used blobanimation.com

Styling a image with aanimated svg

You can change the shape of a image with a Svg Mask but you can also animate the svg, and when you animate you can make the image come alive

Styling text with a Image

You can put a image inside the text with background-clip: text; and with text-fill-color: transparent;