CSS to zoom in background image and scroll up text from bottom to up-CodePudding

My objective is to have a CSS which when user hovers the DIV it will

zoom (scale up) the background image
move the text within the div from bottom to the top (but want to keep the text size unchanged)

My initial code is like the following

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

.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);}


a {
    display: block;
    font-size: 35px;
    text-decoration:none;  
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    cursor: pointer;

}

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

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

.parent:hover a, .parent:focus a {
    display: block;
    color:#FFFFFF;
    transition: 0.5s;
    top:-100px;
}

.parent a {
    display: block;
    transition: 0.5s;
    color:white;
    top:100px;
}


.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

}

<div >
  <div >
    <div  onclick="javascript:alert('test');">
      <a href="#">
         Los Angeles
      </a>

    </div>
  </div>

</div>

Now it has 2 problems

actually I just use top:100px; and change to top:-100px; , which actually is not vertically-bottom aligned moving to vertical-top aligned. This is not an ideal solution I think because if the text is too long it may overflow
when user hovers the DIV, the bottom image can be zoomed (scaled up), but I want the text to remain the same size (now the text also scaled up)

I will be very grateful if someone can tell me how to fix the above two issues. Thanks in advance

CodePudding user response：

You can achieve this by putting the anchor tag outside the child div. Like this:

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

      .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 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
      }

      /* Several different images */
      .bg-one {
        background-image: url(https://media.timeout.com/images/101602611/image.jpg);
      }

      a {
        font-size: 35px;
        text-decoration: none;
        font-family: sans-serif;
        text-align: center;
        position: absolute;
        left: 0;
        top: calc(100% - 50px);
        right: 0;
        cursor: pointer;
        height: 50px;
        transition: top 0.5s ease 0s;
        color: #fff;
      }

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

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

      .parent:hover a,
      .parent:focus a {
        display: block;
        color: #ffffff;
        transform: scale(1);
        transition: 0.5s;
        top: 0px;
      }

      .child:before {
        content: "";
        display: none;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

<div >
  <div >
    <div  onclick="javascript:alert('test');"></div>
    <a href="#">Los Angeles</a>
  </div>
</div>

CodePudding user response：

This is one of the ways to achieve that effect.

#zoomimg,#movetxt {
    width: 400px;
    height: 400px;
    overflow: hidden;
}

#zoomimg {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg");
}

#zoomimg:hover {
    -webkit-animation: zooming 5s infinite;
    animation: zooming 5s infinite;
}

#zoomimg:hover #movetxt {
    -webkit-animation: moving 5s infinite;
    animation: moving 5s infinite;
}

@keyframes zooming {
    from {
      background-size: 100% 100%;
    }
    to {
      background-size: 150% 150%;
    }
}

@keyframes moving {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-200px);
    }
}

<div id="zoomimg">
  <div id="movetxt">
    Line one<br/>
    Line two
  </div>
</div>