Animated images on WordPress - wordpress

Question

I want these images above to pop up when someone hovers over them, each image pops up and comes to the center when someone hovers a mouse over the image, also they should be arranged in that format. I want to do this in WordPress, I am designing a website and the client wants that effect. Is it possible friends? please someone assist me.

Answer 1

HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<nav>
<img src="http://winn-brown.co.uk/wp-content/uploads/2016/06/Logo-new.png" id="logo">
</nav>
<div class="wrapper">
<div class="parent" onclick="">
<div class="child bg-one">
Los Angeles
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-two">
London
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-three">
New York
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-four">
Hollywood
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-five">
Dubai
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-six">
San Francisco
</div>
</div>
</div>
CSS Code
/* Global Styling */
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 */
.parent {
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;*/
}
.parent:hover .child, .parent: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);
}
.parent:hover .child:before, .parent:focus .child:before {
display: block;
}
.parent:hover a, .parent: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) {
.parent {width: 100%; margin: 20px 0px}
.wrapper {padding: 20px 20px;}
}
.hello {display: none}
You will try this using that code when you hover the image then it will be zoom out the image. I think it will help you.