css zoom background image on hover Example

Today, We want to share with you css zoom background image on hover.In this post we will show you how to zoom/scale an element, particularly images and background images on hover with pure CSS., hear for Background Image Zoom In On Hover we will give you demo and example for implement.In this post, we will learn about Image Overlay Hover Effects With CSS3 Transitions with an example.

Zooming Background Images

Learn how to zoom/scale an element on hover with CSS Example.
Example 1: index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<style>
html, body {margin:0px; padding: 0px;}

nav {
    background-color: #34495e;
    height: 80px;
		position: fixed;
		width: 100vw;
		top: 0;
		z-index: 999;
}

#logo {height: 80px; margin-left: 20px;}

.wrapper {
    padding: 50px 50px;
    max-width: 1200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
		margin-top: 80px;
}

.right {float: right !important;}
/* Image zoom on hover + Overlay colour */
.websites {
    width: 45%;
    margin: 20px;
    height: 300px;
    border: 1px solid blue;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
	cursor: pointer;
}

.child {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

/* Several different images */
.bg-one {background-image: url(https://media.timeout.com/images/101602611/image.jpg);}
.bg-two {background-image: url(http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg);}
.bg-three {background-image: url(https://media.timeout.com/images/101484105/image.jpg);}
.bg-four {background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg);}
.bg-five {background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);}
.bg-six {background-image: url(http://blog.whitepages.com/wp-content/uploads/2015/04/san-franc.jpg);}


a {
    display: none;
    font-size: 35px;
    color: #ffffff !important;
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    cursor: pointer;
    /*text-decoration: none;*/
}

.websites:hover .child, .websites:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.websites:hover .child:before, .websites:focus .child:before {
    display: block;
}

.websites:hover a, .websites:focus a {
    display: block;
}

.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(52,73,94,0.75);
}

/* Media Queries */
@media screen and (max-width: 960px) {
    .websites {width: 100%; margin: 20px 0px}
		.wrapper {padding: 20px 20px;}
}

.hello {display: none}
</style>
<div class="wrapper">
	<div class="websites" onclick="">
		<div class="child bg-one">
			<a href="#">Los Angeles</a>
		</div>
	</div>

	<div class="websites right" onclick="">
		<div class="child bg-two">
			<a href="#">London</a>
		</div>
	</div>

	<div class="websites" onclick="">
		<div class="child bg-three">
			<a href="#">New York</a>
		</div>
	</div>

	<div class="websites right" onclick="">
		<div class="child bg-four">
			<a href="#">Hollywood</a>
		</div>
	</div>

	<div class="websites" onclick="">
		<div class="child bg-five">
			<a href="#">Dubai</a>
		</div>
	</div>

	<div class="websites right" onclick="">
		<div class="child bg-six">
			<a href="#">San Francisco</a>
		</div>
	</div>
</div>


I hope you get an idea about CSS Zoom Background Image on Hover.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.