onhover изменить изображение и текстовое положение вниз и onmouseout перейти в исходное положение?

Question

Могу ли я узнать, как изменить изображение, а текст внутри изображения изменит его положение? Когда я нахожу изображение, оно перемещается вниз, но не текст. Изображение работает правильно, но не текст.

Fiddle:

h2 { 
    position:fixed; 
    margin-top:40px; 
    left: 50; 

    z-index:100; 
height:100%; 
} 
h2:hover{ 
    position: relative; 
    margin-top:-50px; 
    left: 50; 
} 

https://jsfiddle.net/mjLLgce7/1/

Пожалуйста, помогите мне. Благодаря

Answer 1

Очень багги коды, которые не были бы возможны без каких-либо серьезных изменений в CSS стайлинга

(я старался не трогать сценарий!)

h2 { 
 
margin:0px; 
 
    line-height:none; 
 

 
} 
 

 
    a{ 
 
    vertical-align:top; 
 
    display:inline-block; 
 
    position: relative; 
 
} 
 
a:hover{ 
 
    top:50px; 
 
}

<script> 
 
function b1(x1) { 
 
    x1.style.height = "140px"; 
 
    x1.style.width = "120px"; 
 
} 
 

 
function s1(x2) { 
 
    x2.style.height = "100px"; 
 
    x2.style.width = "120px"; 
 
} 
 

 
function b2(x3) { 
 
    x3.style.height = "140px"; 
 
    x3.style.width = "120px"; 
 
} 
 

 
function s2(x4) { 
 
    x4.style.height = "100px"; 
 
    x4.style.width = "120px"; 
 
} 
 

 
function b3(x5) { 
 
    x5.style.height = "140px"; 
 
    x5.style.width = "120px"; 
 
} 
 

 
function s3(x6) { 
 
    x6.style.height = "100px"; 
 
    x6.style.width = "120px"; 
 
} 
 

 
function b4(x7) { 
 
    x7.style.height = "140px"; 
 
    x7.style.width = "120px"; 
 
} 
 

 
function s4(x8) { 
 
    x8.style.height = "100px"; 
 
    x8.style.width = "120px"; 
 
} 
 

 
function b5(x9) { 
 
    x9.style.height = "140px"; 
 
    x9.style.width = "120px"; 
 
} 
 

 
function s5(x) { 
 
    x.style.height = "100px"; 
 
    x.style.width = "120px"; 
 
} 
 

 
function b6(x12) { 
 
    x12.style.height = "140px"; 
 
    x12.style.width = "120px"; 
 
} 
 

 
function s6(x12) { 
 
    x12.style.height = "100px"; 
 
    x12.style.width = "120px"; 
 
} 
 
</script> 
 

 

 
<a href="#"> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b1(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/why-study.png" onmouseout="s1(this)" alt="study"/> 
 
</a> 
 

 
<a href="#" class> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b2(this)" onmouseout="s2(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/graduate.png" alt="graduate"/> 
 
</a> 
 

 
<a href="#" class> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b3(this)" onmouseout="s3(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/pg.png" alt="pg" /> 
 
</a> 
 

 
<a href="#" class> 
 
    <h2>some text1</h2> 
 
    <img onmouseover="b4(this)" onmouseout="s4(this)" border="0" src="http://newshores.newshores.in/wp-content/uploads/2016/01/pre-university.png" alt="pre-uni"/> 
 
</a>