English

CSS Tutorial

CSS3 Tutorial

CSS Advanced

CSS References

CSS Responsive

CSS - Style Images

Hello there, aspiring web designers! Today, we're going to embark on an exciting journey through the world of CSS image styling. As your friendly neighborhood computer teacher, I'm thrilled to guide you through this adventure. Remember, just like learning to ride a bicycle, mastering CSS takes practice, but I promise it'll be fun!

CSS - Style Images

CSS Style Image - Rounded Images

Let's start with something simple yet elegant: rounded images. You know how we love to soften the edges in life? Well, we can do the same with our images!

<img src="cute_puppy.jpg" alt="A cute puppy" class="rounded-image">
.rounded-image {
  border-radius: 25px;
}

In this example, we're telling the browser to round the corners of our image by 25 pixels. It's like giving your image a little haircut! You can adjust this value to make the corners more or less rounded.

CSS Style Image - Circle Images

Now, let's take it a step further and turn our images into perfect circles. This is great for profile pictures or any image where you want to focus on the center.

<img src="profile_pic.jpg" alt="Profile picture" class="circle-image">
.circle-image {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

Here's where the magic happens: border-radius: 50% turns our square image into a circle. We set a fixed width and height, and object-fit: cover ensures the image fills the circle nicely without stretching.

CSS Style Image - Thumbnail Images

Thumbnails are like the movie trailers of the image world - small previews that give you a taste of the full image. Let's create some!

<img src="landscape.jpg" alt="Beautiful landscape" class="thumbnail">
.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

This CSS creates a small, square thumbnail with a neat border. The object-fit: cover property ensures the image fills the thumbnail area without distortion.

CSS Style Image - Thumbnail Images As Link

Let's make our thumbnails clickable! This is perfect for image galleries or product listings.

<a href="full_image.jpg">
  <img src="thumbnail.jpg" alt="Click to enlarge" class="thumbnail-link">
</a>
.thumbnail-link {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  transition: transform 0.3s ease;
}

.thumbnail-link:hover {
  transform: scale(1.1);
}

We've added a cool hover effect here. When you mouse over the thumbnail, it slightly enlarges, giving a nice interactive feel.

CSS Style Image - Responsive Images

In today's multi-device world, we need our images to look good on all screen sizes. Let's make our images responsive!

<img src="scenery.jpg" alt="Beautiful scenery" class="responsive-image">
.responsive-image {
  max-width: 100%;
  height: auto;
}

This simple CSS ensures that our image will never be wider than its container, and the height will adjust proportionally. It's like having an image that knows how to behave in any situation!

CSS Style Image - Center an Image

Centering an image can be tricky, but I've got a neat trick for you. It's like teaching your image to stand right in the middle of the stage!

<div class="image-container">
  <img src="centered_image.jpg" alt="Centered image" class="center-image">
</div>
.image-container {
  text-align: center;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

This method works for both inline and block-level images. The text-align: center on the container helps with inline images, while margin: auto centers block-level images.

CSS Style Image - Polaroid Images / Cards

Remember Polaroid cameras? Let's recreate that classic look with CSS!

<div class="polaroid">
  <img src="vacation.jpg" alt="Vacation memory">
  <div class="caption">Summer 2023</div>
</div>
.polaroid {
  width: 250px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

.polaroid img {
  width: 100%;
}

.caption {
  text-align: center;
  padding: 10px 20px;
}

This CSS creates a white border around the image and adds a subtle shadow for that 3D effect. The caption sits below the image, just like a real Polaroid!

CSS Style Image - Transparent Image

Sometimes, we want our images to be see-through. It's like giving your image a ghost-like quality!

<img src="logo.png" alt="Company logo" class="transparent-image">
.transparent-image {
  opacity: 0.5;
}

The opacity property ranges from 0 (completely transparent) to 1 (fully opaque). You can adjust this value to get the desired level of transparency.

CSS Style Image - Center The Text

Let's put some text right in the middle of an image. It's like creating your own motivational poster!

<div class="image-text-container">
  <img src="background.jpg" alt="Background image">
  <div class="centered-text">Your text here</div>
</div>
.image-text-container {
  position: relative;
  text-align: center;
  color: white;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This CSS uses positioning to place the text exactly in the center of the image. The transform property ensures it's centered both vertically and horizontally.

CSS Style Image - Filters

CSS filters are like Instagram for your web images. Let's play around with some!

<img src="landscape.jpg" alt="Landscape" class="filtered-image">
.filtered-image {
  filter: grayscale(100%) brightness(150%) contrast(120%);
}

This example applies multiple filters: it turns the image grayscale, increases brightness, and enhances contrast. You can mix and match different filters to create unique effects!

Here's a table of some common CSS image filters:

Filter Description Example
grayscale() Converts image to grayscale filter: grayscale(100%);
sepia() Converts image to sepia filter: sepia(60%);
saturate() Saturates the image filter: saturate(200%);
hue-rotate() Applies a hue rotation filter: hue-rotate(90deg);
invert() Inverts the image colors filter: invert(75%);
opacity() Sets the opacity of the image filter: opacity(25%);
brightness() Adjusts the brightness filter: brightness(150%);
contrast() Adjusts the contrast filter: contrast(200%);
blur() Applies a blur effect filter: blur(5px);

CSS Style Image - Fade In Overlay

Let's create a cool effect where text fades in when you hover over an image. It's like revealing a secret message!

<div class="image-overlay">
  <img src="product.jpg" alt="Product image">
  <div class="overlay">
    <div class="text">Product Description</div>
  </div>
</div>
.image-overlay {
  position: relative;
  width: 50%;
}

.image-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.5);
}

.image-overlay:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

This CSS creates a dark overlay that fades in when you hover over the image, revealing the text.

CSS Style Image - Slide In Effect

Now, let's create a slide-in effect for our image caption. It's like pulling back a curtain to reveal the star of the show!

<div class="slide-container">
  <img src="nature.jpg" alt="Nature scene" class="slide-image">
  <div class="slide-caption">Beautiful Nature</div>
</div>
.slide-container {
  position: relative;
  overflow: hidden;
}

.slide-image {
  display: block;
  width: 100%;
  height: auto;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 100%;
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
  transition: 0.5s ease;
  width: 100%;
}

.slide-container:hover .slide-caption {
  left: 0;
}

This CSS hides the caption off-screen and slides it in from the right when you hover over the image.

CSS Style Image - Flip an Image

Let's add some pizzazz with a flip effect! It's like giving your image a backstage pass to show off its reverse side.

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="front.jpg" alt="Front side">
    </div>
    <div class="back">
      <img src="back.jpg" alt="Back side">
    </div>
  </div>
</div>
.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

This CSS creates a 3D flip effect when you hover over the container. The front image flips to reveal the back image.

CSS Style Image - Responsive Image Gallery

Let's put our skills together and create a responsive image gallery. It's like curating your own mini art exhibition!

<div class="gallery">
  <img src="img1.jpg" alt="Gallery image 1">
  <img src="img2.jpg" alt="Gallery image 2">
  <img src="img3.jpg" alt="Gallery image 3">
  <img src="img4.jpg" alt="Gallery image 4">
</div>
.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.gallery img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .gallery img {
    width: 49%;
    margin: 0.5%;
  }
}

@media screen and (min-width: 1000px) {
  .gallery img {
    width: 24%;
    margin: 0.5%;
  }
}

This CSS creates a flexible gallery that adjusts based on screen size. On small screens, images stack vertically. On medium screens, they form two columns, and on large screens, they create four columns.

CSS Style Image - Image Modal

Finally, let's create a modal that pops up when you click an image. It's like giving your images their own spotlight moment!

<img src="thumbnail.jpg" alt="Click to enlarge" class="modal-trigger" onclick="openModal(this)">

<div id="imageModal" class="modal">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modalImage">
</div>
.modal-trigger {
  cursor: pointer;
  transition: 0.3s;
}

.modal-trigger:hover {opacity: 0.7;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
function openModal(img) {
  var modal = document.getElementById("imageModal");
  var modalImg = document.getElementById("modalImage");
  modal.style.display = "block";
  modalImg.src = img.src;
}

function closeModal() {
  document.getElementById("imageModal").style.display = "none";
}

This combination of HTML, CSS, and JavaScript creates a modal that opens when you click on an image, displaying a larger version of the image.

And there you have it, folks! We've journeyed through the wonderful world of CSS image styling. Remember, the key to mastering these techniques is practice. So go ahead, play around with these examples, mix and match, and create something uniquely yours. Happy coding!

Credits: Image by storyset

Previous Tutorial:
CSS - Shapes
Next Tutorial:
CSS - Specificity