Animierte Bilder auf Wordpress

Question

Ich möchte diese Bilder über Pop-up, wenn jemand über sie schwebt, jedes Bild öffnet sich und kommt in die Mitte, wenn jemand eine Maus über das Bild schwebt, auch sollten sie in arrangiert werden dieses Format. Ich möchte das in WordPress machen, ich entwerfe eine Website und der Kunde will diesen Effekt. Ist es möglich, Freunde? Bitte hilf mir.

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"> 
      <a href="#">Los Angeles</a> 
     </div> 
    </div> 

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

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

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

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

    <div class="parent right" onclick=""> 
     <div class="child bg-six"> 
      <a href="#">San Francisco</a> 
     </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} 

du diesen Code verwenden versuchen, wenn Sie das Bild schweben dann wird das Bild verkleinert werden. Ich denke, es wird dir helfen.