CODEWITHSUNDEEP
javascripthtmlcss
Matthieu Ducorps
Matthieu Ducorps

Reputation: 160

CSS/Javascript animation with text

I pretty new in CSS/Javascript and i'm trying to do an animation where i'm zooming out in a photo and adding a text, it's basically working but i have a glitch at the beginning that i don't understand how to get rid of it...

You can also find this code on CodePen.io or GitHub Gist

I hope my description is clear enough, thanks in advance for any input !

var x = document.getElementById("img_txt");

// if (x) {
  x.addEventListener("mouseover", func, false);
  x.addEventListener("mouseout", func1, false);
// }

function func()
{
   document.getElementById("toto").setAttribute("style", "display:block;")
}

function func1()
{
    document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {

     height: 400px;
  	 width: 100%;
  	 margin: 0 auto;
  	 padding: 20px 0px 10px 0px;
  	 display: flex;
  	 justify-content: center;
  	 align-items: center;
  	 overflow: hidden;

}

img.imgvyge {

    border-radius: 50%;
    object-fit: cover;
    width: 300px;
    height: 300px;
    justify-content: center;
    align-items: center;
    margin: auto 30px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }

.imgvyge:hover {

    width: 400px;
    height:400px;

  }

p.text {

    display: none;
    z-index:100;
    position:relative;
    color:black;
    font-size:24px;
    font-weight:bold;
    left:130px;
    bottom:160px;
    /*-webkit-transition: all 0.7s ease;*/
    transition: all 0.7s ease;

  }
<section class="voyages">
  <a id="img_txt"　class="anchorvyge" href="#">
      <img class="imgvyge" src="https://unsplash.it/1600/900/?random" alt="vyge1"></img>
      <p id="toto" class="text">YOPYOP</p>
  </a> 
</section>

Upvotes: 3

Views: 104

Answers (1)

Asifuzzaman
Asifuzzaman

Reputation: 1783

I think your height is making the problem and you talked about this glitch that image jumped at the first place when you hover the mouse.just Make it 100% .hope it helps.

var x = document.getElementById("img_txt");

// if (x) {
  x.addEventListener("mouseover", func, false);
  x.addEventListener("mouseout", func1, false);
// }

function func()
{
   document.getElementById("toto").setAttribute("style", "display:block;")
}

function func1()
{
    document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {

     height: 100%;
  	 width: 100%;
  	 margin: 0 auto;
  	 padding: 20px 0px 10px 0px;
  	 display: flex;
  	 justify-content: center;
  	 align-items: center;
  	 overflow: hidden;

}

img.imgvyge {

    border-radius: 50%;
    object-fit: cover;
    width: 300px;
    height: 300px;
    justify-content: center;
    align-items: center;
    margin: auto 30px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }

.imgvyge:hover {

    width: 400px;
    height:400px;

  }

p.text {

    display: none;
    z-index:100;
    position:relative;
    color:black;
    font-size:24px;
    font-weight:bold;
    left:130px;
    bottom:160px;
    /*-webkit-transition: all 0.7s ease;*/
    transition: all 0.7s ease;

  }
<body>
<section class="voyages">
  <a id="img_txt"　class="anchorvyge" href="#">
      <img class="imgvyge" src="https://unsplash.it/1600/900/?random" alt="vyge1"></img>
      <p id="toto" class="text">YOPYOP</p>
  </a> 
</section>
</body>

Upvotes: 2

Related Questions