Full CSS reference

Here’s a comprehensive reference of CSS effects and borders that you can apply to images, along with examples for each:

1. Border: Adds a border around the image.

img {
  border: 2px solid black;
}

2. Box Shadow: Adds a shadow around the image.

img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

3. Opacity: Adjusts the transparency of the image.

img {
  opacity: 0.5;
}

4. Grayscale: Converts the image to grayscale.

img {
  filter: grayscale(100%);
}

5. Sepia: Applies a sepia effect to the image.

img {
  filter: sepia(100%);
}

6. Blur: Blurs the image.

img {
  filter: blur(5px);
}

7. Brightness: Adjusts the brightness of the image.

img {
  filter: brightness(50%);
}

8. Contrast: Adjusts the contrast of the image.

img {
  filter: contrast(200%);
}

9. Hue Rotate: Rotates the hue of the image.

img {
  filter: hue-rotate(90deg);
}

10. Invert: Inverts the colors of the image.

img {
  filter: invert(100%);
}

11. Saturate: Adjusts the saturation of the image.

img {
  filter: saturate(200%);
}

12. Sepia: Applies a sepia effect to the image.

img {
  filter: sepia(100%);
}

13. Drop-Shadow: Adds a drop shadow effect to the image.

img {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

14. Transition: Adds a transition effect to the image.

img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}

15. Animation: Adds an animation effect to the image.

@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
img {
  animation: slidein 1s ease;
}

These are just a few examples of the many CSS effects and borders you can apply to images. Experiment with different styles to create unique and eye-catching designs!