Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Styling Images

10 minutes

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Styling Images

Rounded Images

Employ the border-radius property to produce images with rounded corners.

Example

Rounded Image:

img {
border-radius: 8px;
}

Example

Circled Image:

img {
border-radius: 50%;
}

Thumbnail Images

Utilize the border property to generate thumbnail images.

Thumbnail Image:

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src=”paris.jpg” alt=”Paris”>

Example

img {
border: 1px solid #ddd;
  border-radius: 4px;
padding: 5px;
  width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href=”paris.jpg”>
  <img src=”paris.jpg” alt=”Paris”>
</a>

Responsive Images

Responsive images adapt dynamically to match the dimensions of the screen.

Adjust the browser window size to observe the impact.

To ensure that an image can shrink as needed but won’t enlarge beyond its original dimensions, include the following:

Example

img {
max-width: 100%;
height: auto;
}

Center an Image

To center-align an image, set both left and right margins to auto and convert it into a block element.

Example

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Polaroid Images / Cards

Example

div.polaroid {
width: 80%;
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);
}

img {width: 100%}

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

Transparent Image

The opacity property accepts values ranging from 0.0 to 1.0. A lower value indicates greater transparency.

Example

img {
opacity: 0.5;
}

Image Text

How to place text over an image:

Example

Image Filters

The CSS filter property applies visual effects such as blur and saturation to an element.

Please note that the filter property is not supported in Internet Explorer or Edge 12.

Example

Convert all images to grayscale by changing their color to 100% black and white.

img {
filter: grayscale(100%);
}

Image Filters

Please be aware that the filter property is not compatible with Internet Explorer or Edge version 12.

Image Hover Overlay

Generate a hover effect with an overlay.

Flip an Image

Hover your mouse cursor over the image.

Example

img:hover {
transform: scaleX(-1);
}

Responsive Image Gallery

CSS can be employed to construct image galleries. This example utilizes media queries to adjust the arrangement of images based on varying screen sizes. Resize the browser window to observe the impact.

Example

.responsive {
padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

Image Modal (Advanced)

This example showcases the collaboration between CSS and JavaScript.

Initially, CSS is utilized to craft a modal window (dialog box), which is hidden by default.

Subsequently, JavaScript is employed to reveal the modal window and to showcase the image within it, upon a user clicking on the image.

Example

// Get the modal
var modal = document.getElementById(‘myModal’);

// Get the image and insert it inside the modal – use its “alt” text as a caption
var img = document.getElementById(‘myImg’);
var modalImg = document.getElementById(“img01”);
var captionText = document.getElementById(“caption”);
img.onclick = function(){
modal.style.display = “block”;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}