Posts

Showing posts from June, 2023

Transition ON PIC

CSS img1 is div img1 img is a picture that we use then hover we use overflow hidden means size increase hoga pic ka magr div ky bahir increse show nahi hoga that it   #img1 {     width : 40% ;     height : 40vh ;     margin : 20px ;     overflow : hidden ;     float : left ; } #img1 img {     width : 100% ;     height : 40vh ;     object-fit : cover ;     transition : 1s ; } #img1 img:hover {     transform : scale ( 1.35 ); }

Transition navbar

CSS  transform scale means ky kis cheez ka size increase karna from all side   #navbar ul li a {     color : #fff ;     font-size : 20px ;     padding : 30px ;     margin-left : 80px ;     transition : 1s ;     transition-duration : 1s ; } #navbar ul li a:hover {     color : black ;     transform : scale ( 1.15 ) }

Visibility and z-index

  <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < meta http-equiv = " X-UA-Compatible " content = " ie=edge " > < title > Visibility and z-index </ title > < style > .box { width : 170px ; height : 170px ; border : 2px solid black ; } #box-1 { position : relative ; top : 49px ; z-index : -35 ; background-color : green ; } #box-2 { position : relative ; top : 14px ; /* z-index will work only for position: relative, absolute, fixed or sticky; */ z-index : -165 ; /* will hide the element and the space */ /* di...