How to create Image Hover Effects in a row using HTML & CSS?

In this blog, I am creating Image Hover Effects in a row using HTML & CSS. So, Let’s create an “index.html” & “style.css” below index.html code-

In this index.html container with card & multiple class which is define style.css page-

When you implement from this index.html & style.css page then showing below row-

When you used the cursor in this row image then show the hover effect.
Tagged : / / / /

How to create an attractive reflection card with a hover effect using HTML and CSS?

In this blog, I am using I am creating an attractive card with a hover effect using HTML and CSS. So, Let’s before create a “index.html” and “style.css ” page below index.html page structure define-

In this index.html page, I am using a class “container” with three images and class “container” defined in below “style.css” code-

In this style.css class, i define images & container, class after that show below reflection card in a row.

This row showing three cards with hover effect when you use mouse cursor in these images then show your hover effect.
Tagged : / / / / /

How to create Creative Cube Hover Effects With Changing Color Animation in CSS?

In this tutorial, I am going to create creative Cube Hover Effects With Changing Color Animation in CSS. So, Before creates an “index.html” & “style.css”. Below index.html code-

In this index.html I am using cube shape with help of CSS and create multiple classes which is define below style.css code-

In this style.css page define all classes which is used in index.html and after that show below page with hover effects-

When you using the cursor then show the effect after scrolling the cursor.
Tagged : / / / / / / / /

How to use different types of Media Features in CSS?

  • any-hover – Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
  • any-pointer – Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
  • aspect-ratio – The ratio between the width and the height of the viewport
  • color – The number of bits per color component for the output device
  • color-index – The number of colors the device can display
  • grid – Whether the device is a grid or bitmap
  • height – The viewport height
  • hover – Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
  • inverted-colors – Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
  • light-level – Current ambient light level (added in Media Queries Level 4)
  • max-aspect-ratio – The maximum ratio between the width and the height of the display area
  • max-color – The maximum number of bits per color component for the output device
  • max-color-index – The maximum number of colors the device can display
  • max-device-aspect-ratio – The maximum ratio between the width and the height of the device
  • max-device-height – The maximum height of the device, such as a computer screen
  • max-device-width – The maximum width of the device, such as a computer screen
  • max-height – The
  • max-monochrome – The maximum number of bits per “color” on a monochrome (greyscale) device
  • max-resolution – The maximum resolution of the device, using dpi or dpcmmaximum height of the display area, such as a browser window
  • scan – The scanning process of the output device
  • scripting – Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
  • max-width – The maximum width of the display area, such as a browser window
  • min-aspect-ratio – The minimum ratio between the width and the height of the display area
  • min-color – The minimum number of bits per color component for the output device
  • min-color-index – The minimum number of colors the device can display
  • min-device-aspect-ratio – The minimum ratio between the width and the height of the device
  • min-device-width – The minimum width of the device, such as a computer screen
  • min-device-height – The minimum height of the device, such as a computer screen
  • min-height – The minimum height of the display area, such as a browser window
  • min-monochrome – The minimum number of bits per “color” on a monochrome (greyscale) device
  • min-resolution – The minimum resolution of the device, using dpi or dpcm
  • min-width – The minimum width of the display area, such as a browser window
  • monochrome – The number of bits per “color” on a monochrome (greyscale) device

  • update-frequency – How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
  • width – The viewport width
  • orientation – The orientation of the viewport (landscape or portrait mode)
  • overflow-block – How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
  • overflow-inline – Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
  • pointer – Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
  • resolution – The resolution of the output device, using dpi or dpcm
Tagged : / / / / / / / / /

How to Use Pseudo-classes in CSS?

A pseudo-class is used to define a special state of an element.

Syntax:-

selector:pseudo-class { property:value; }

Ex: –

div:hover { background-color: red;}

Pseudo-classes

  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :checked
  • :first-child
  • :first-of-type
  • :nth-child(n)
Tagged : / / / / / / / / / /

How to use Link Property in CSS?

When you use the “<a>” tag on your HTML page then show text color automatic blue & underline. If you want to implement in your tag using CSS then implement the below property-

Ex:-

a:link {
color: red;
}

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

Tagged : / / / / /