File tree Expand file tree Collapse file tree 1 file changed +34
-0
lines changed Expand file tree Collapse file tree 1 file changed +34
-0
lines changed Original file line number Diff line number Diff line change 465
465
" effects"
466
466
],
467
467
"author" : " dostonnabotov"
468
+ },
469
+ {
470
+ "title" : " Hover to Reveal Color" ,
471
+ "description" : " A card with an image that transitions from grayscale to full color on hover." ,
472
+ "code" : [
473
+ " .card {" ,
474
+ " height: 300px;" ,
475
+ " width: 200px;" ,
476
+ " border-radius: 5px;" ,
477
+ " overflow: hidden;" ,
478
+ " }" ,
479
+ " " ,
480
+ " .card img{" ,
481
+ " height: 100%;" ,
482
+ " width: 100%;" ,
483
+ " object-fit: cover;" ,
484
+ " filter: grayscale(100%);" ,
485
+ " transition: all 0.3s;" ,
486
+ " transition-duration: 200ms;" ,
487
+ " cursor: pointer;" ,
488
+ " }" ,
489
+ " " ,
490
+ " .card:hover img {" ,
491
+ " filter: grayscale(0%);" ,
492
+ " scale: 1.05;" ,
493
+ " } "
494
+ ],
495
+ "tags" : [
496
+ " css" ,
497
+ " hover" ,
498
+ " image" ,
499
+ " effects"
500
+ ],
501
+ "author" : " Haider-Mukhtar"
468
502
}
469
503
]
470
504
},
You can’t perform that action at this time.
0 commit comments