{I+=codeWee;}
[CSS] Creating a Zoom Effect on a background image on hover using CSS
-- HTML --

<div class="overlay">
	<div class="img" style='background-image: url("image.png");'>

	</div>
</div>


-- CSS --

.img{
	display: block;
	width: 300px;
	height: 300px;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
	-moz-background-size: 100%;
	-o-background-size: 100%;

	-webkit-transition:		all 0.5s ease-in-out;
	-moz-transition:		all 0.5s ease-in-out;
	-o-transition:			all 0.5s ease-in-out;
	-ms-transition:			all 0.5s ease-in-out;
	transition:			all 0.5s ease-in-out;
}

.overlay:hover > .img{

	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
HTML | PHP | C++ | DirectX11 | Javascript | C# | HTML5 | ASP | SQL | General | CSS | Oculus Rift | Unity3d | Virtools SDK | Tip | NSIS | PowerShell | node.js | Web API | RTSP | All
Copyright© 2016 CodeWee.com All rights reserved.