In one of the starting tutorial of ResponsiveWebDesign Course, it was mentioned we can use margin: auto to center anything
But below code is working fine, but is NOT CENTERED
.i_am_image {
width: 30px;
margin: auto;
}
.i_am_image:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
</head>
<body>
<!-- To change animation on hovering -->
<img class="i_am_image" src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />