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 465465 " effects"
466466 ],
467467 "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"
468502 }
469503 ]
470504 },
You can’t perform that action at this time.
0 commit comments