The CSS object-position property is used to specify how an <img> or <video> should be positioned within its container.
Example
img {
width: 200px;
height: 300px;
object-fit: cover;
}
Month: February 2025
CSS The object-fit Property
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
The CSS object-fit Property
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”. Continue reading CSS The object-fit Property
CSS Image Shapes
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
The CSS clip-path Property
The clip-path property lets you clip an element to a basic shape.
The CSS circle() Function
The circle() function defines a circle with a radius and a position.
The circle() function is used within the clip-path property.
CSS Image Filter Effects
The CSS filter property is used to add visual effects to elements.
CSS Filters
The CSS filter property is used to add visual effects (like blur and saturation) to elements.
Within the filter property, you can use the following CSS functions:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()
CSS Centering Images
Center an Image Horizontally in Two Ways
1. Using margin: auto
One way to center an image horizontally on a page is to use margin: auto.
Since the <img> element is an inline element (and
margin: autodisplay: block.
In addition, we have to define a width. The width of the image must be smaller than the width of the page.
Here is a horizontally centered image using margin: auto.
CSS Styling Images
Learn how to style images using CSS.
Rounded Images
You can use the border-radius property to create rounded images :
Rounded Image:
img {
border-radius: 8px;
}
Circled Image:
img {
border-radius: 50%;
}
CSS Tooltip
Create tooltips with CSS.
Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:
Example
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Hover over me Tooltip text
CSS Animations
CSS Animations
CSS allows animation of HTML elements without using JavaScript!
In this article you will learn about the following properties :
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
CSS Transitions
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
In this chapter you will learn about the following properties:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
CSS 3D Transforms
CSS 3D Transforms
CSS also supports 3D transformations.
CSS 3D Transforms Functions
With the CSS transform property you can use the following 3D transformation functions:
rotateX()rotateY()rotateZ()