Zoom in effects in hover

How to Zoom in effects in hover? Copy the HTML / CSS structure and paste it into your editor.

Example:

HTML

<a class="zoom-in-hover" href="#">
    <span class="group">
        <img src="https://www.anthonypagaycarbon.com/wp-content/plugins/wordpress-popular-posts/no_thumb.jpg" alt="Zoom in effects in hover" />
    </span>
</a>

CSS

.zoom-in-hover {
	overflow: hidden;
	display: inline-block;
	text-align: center;
}
.zoom-in-hover .group {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.8s ease-in-out;
	display: block;
	overflow: hidden;
}
.zoom-in-hover:hover .group {
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}