CSS/Javascript animation with text

Question

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>

what type of glitch are you facing? i m sorry but still unclear — Pritish Vaidya
– Pritish Vaidya, Commented Oct 17, 2016 at 5:43
Sorry if it was not clear enough it's when you mouse over the image, it jump a bit then start the animation properly the solution below propose by @asifuzzman is fixing my problem Thanks ! — Matthieu Ducorps
– Matthieu Ducorps, Commented Oct 18, 2016 at 15:49

Asifuzzaman · Accepted Answer · 2016-10-17 05:47:13Z

2

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>

answered Oct 17, 2016 at 5:47

Asifuzzaman

1,7931 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthieu Ducorps Over a year ago

effectively working ! Now have to look at it more closely to understand this behaviour.

Asifuzzaman Over a year ago

glad to help :) .your height was fixed at the first place thats why it got conflicted and took a little bump while animating .

Collectives™ on Stack Overflow

CSS/Javascript animation with text

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related