Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 634 of 801
Role of CSS Grid Container
The CSS Grid Container is the parent element that establishes a grid formatting context for its children. When you apply display: grid to an element, it becomes a grid container, and all its direct children automatically become grid items. Syntax .container { display: grid; grid-template-columns: value; grid-template-rows: value; } Key Properties PropertyDescription display: gridCreates a grid container grid-template-columnsDefines the number and size of columns grid-template-rowsDefines the number and size of rows grid-gapSets spacing between grid items Example: Basic Grid ...
Read MoreCSS object-fit Property Values
The CSS object-fit property is used to specify how an image or video should be resized to fit its container. This property is particularly useful when you need to maintain aspect ratios or control how content fills its allocated space. Syntax selector { object-fit: value; } Possible Values ValueDescription fillContent is stretched to completely fill the container (default value) containContent is scaled to maintain aspect ratio while fitting entirely within container coverContent is scaled to maintain aspect ratio while covering entire container (may be clipped) noneContent retains its original ...
Read MoreHow an or should be resized to fit its container with CSS?
The CSS object-fit property is used to resize an image to fit its container while maintaining control over how the image is scaled and positioned. This property is essential for creating responsive layouts where images need to adapt to different container sizes without distorting their appearance. Syntax selector { object-fit: value; } Possible Values ValueDescription fillStretches the image to fill the container (may distort aspect ratio) containScales image to fit inside container while maintaining aspect ratio coverScales image to cover entire container while maintaining aspect ratio scale-downActs as either ...
Read MoreFlip an image on mouse over with CSS
The CSS transform property can be used to flip an image horizontally when a user hovers over it. This creates an engaging interactive effect by using the scaleX(-1) value to mirror the image along its X-axis. Syntax selector:hover { transform: scaleX(-1); } Example: Horizontal Image Flip on Hover The following example demonstrates how to flip an image horizontally when the mouse hovers over it − .flip-image { width: 300px; ...
Read MoreHow to position text to top right position on an image with CSS
To position text to the top right corner of an image, you need to use CSS positioning properties. This involves making the container element relatively positioned and the text absolutely positioned with top and right properties. Syntax .container { position: relative; } .text-overlay { position: absolute; top: value; right: value; } Example The following example demonstrates how to position text in the top right corner of an image − ...
Read MoreHow to add rounded corners to a button with CSS?
To add rounded corners to a button, use the border-radius property. This property allows you to control the curvature of your button corners, creating a more modern and polished appearance. Syntax button { border-radius: value; } Possible Values ValueDescription lengthDefines the radius in px, em, rem, etc. %Defines the radius as a percentage of the button's dimensions 50%Creates a circular button (if width equals height) Example: Basic Rounded Button You can try to run the following code to add rounded corners − ...
Read MoreArrow to the top of the tooltip with CSS
The CSS bottom property combined with border styling can be used to create an arrow pointing to the top of a tooltip. This creates a visual connection between the tooltip and its trigger element. Syntax .tooltip::after { content: ""; position: absolute; bottom: 100%; left: 50%; border-width: size; border-style: solid; border-color: transparent transparent color transparent; } Example The following example creates a tooltip with an arrow pointing ...
Read MoreCenter an image with CSS
Centering an image in CSS can be accomplished using the display: block property combined with margin: 0 auto. This technique works by making the image a block-level element and then applying automatic left and right margins. Syntax img { display: block; margin: 0 auto; } Method 1: Using Block Display and Auto Margins The most common method to center an image horizontally is to set display: block and use margin: 0 auto − .centered-image { ...
Read MoreHow to scale down an image with CSS to make it responsive
The CSS max-width and height properties can be used to make images responsive, allowing them to scale down automatically based on the container size while maintaining their aspect ratio. Syntax img { max-width: 100%; height: auto; } Key Properties PropertyValueDescription max-width100%Ensures image never exceeds container width heightautoMaintains aspect ratio automatically Example: Basic Responsive Image The following example demonstrates how to make an image scale down responsively − .container { ...
Read MoreDisplay a blue shadow on image hover with CSS
To display a blue shadow on image hover, use the CSS box-shadow property with the :hover pseudo-class. This creates an interactive effect that enhances user experience by providing visual feedback when users hover over images. Syntax selector:hover { box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color; } Example: Blue Shadow on Image Hover The following example displays a blue shadow when you hover over the image − img { width: 250px; ...
Read More