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.

Read Also:  how to check install laravel version?

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *