Sharavnan Kv Sharavnan Kv - 2 months ago 5
CSS Question

How to achieve this awesome CSS animation

I'm trying to do this animation using CSS | CSS3 and with JavaScript. which show in the image below, but it's really difficult to me to do this. Please help me out in this. Here is the code i have.

HTML:

<div class="container">
<div class="box">
<h1 class="big">TRY THIS</h1>
</div><!--end of box-->
</div><!--end of conatiner-->


CSS:

body{
background-color: #222;
}
.container{
background-image: url(test.jpg);
height: 96vh;
width: 100%;
}
.box{
background-color: #fff;
height: 98vh;
width: 100%;

}
.big{
font-size: 17vw;
background: url(test.jpg) 33px 659px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding-top: 24vh;
margin-top: 0;
text-align: center;
}


And my TARGET:
enter image description here

Answer

A posibility, using 2 elements, one for the image and another for the text, and blend mode to achieve transparency:

body,
html {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://placekitten.com/1000/600);
  background-size: cover;
}
.box {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background-color: white;
  overflow: hidden;
  mix-blend-mode: lighten;

}

.big {
  position: absolute;
  left: 20%;
  top: 30%;
  font-size: 10vw;
  color: black;
  animation: zoom 4s infinite;
}
@keyframes zoom {
  from {
    transform: scale(0.2, 0.2);
  }
  to {
    transform: scale(4, 4);
  }
}
<div class="container">
  <div class="box">
    <div class="big">TRY THIS</div>
  </div>
</div>

Comments