帶文本的CSS/Javascript動畫

我在CSS/Javascript中很新穎，我試圖做一個動畫，我縮小了照片並添加了一個文本，它基本上工作，但我在開始時有一個小故障我不知道如何擺脫它......帶文本的CSS/Javascript動畫

你也可以找到這段代碼在CodePen.io或GitHub Gist

我希望我的描述是非常明顯的，在此先感謝任何輸入！

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; 
 
    \t width: 100%; 
 
    \t margin: 0 auto; 
 
    \t padding: 20px 0px 10px 0px; 
 
    \t display: flex; 
 
    \t justify-content: center; 
 
    \t align-items: center; 
 
    \t 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>

來源

2016-10-17 Matthieu Ducorps

，你面對的是什麼類型的故障？對不起，但仍不清楚 –

對不起，如果它不是很清楚，它是當你把鼠標放在圖像上，它跳了一下，然後開始正確的動畫下面的解決方案建議@asifuzzman正在解決我的問題謝謝！ –

我認爲你的身高使得問題，你談到了這個故障的形象放在第一位跳下，當你將鼠標懸停在mouse.just讓它100％。希望它幫助。

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%; 
 
    \t width: 100%; 
 
    \t margin: 0 auto; 
 
    \t padding: 20px 0px 10px 0px; 
 
    \t display: flex; 
 
    \t justify-content: center; 
 
    \t align-items: center; 
 
    \t 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>

來源

2016-10-17 05:47:13

非常感謝！它是有效的 –

有效地工作！現在必須更仔細地研究它以理解這種行爲。 –

高興地幫助:)你的身高被固定在第一個地方，這就是爲什麼它有衝突，並採取了一些小動作，而動畫。 –

帶文本的CSS/Javascript動畫

回答

相關問題