Постоянный текст, прежде чем мыши над Image

Question

У меня есть этот Example

Html:

<ul class="img-list"> 
    <li> 
     <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> 
<span class="text-content"><span> 
Text To Display</span></span> 
    </li> 
</ul> 

CSS:

ul.img-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
ul.img-list { 
    display: inline-block; 
    height: 150px; 
    margin: 0 5px 1em 0; 
    position: relative; 
    width: 360px; 
    margin-top:-5px; 
} 
span.text-content { 
    background: rgba(0, 0, 0, 0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 150px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 150px; 
} 
span.text-content span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 
span.text-content { 
    background: rgba(0, 0, 0, 0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 150px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    opacity: 0; 
} 
ul.img-list li:hover span.text-content { 
    opacity: 1; 
} 
span.text-content { 
    background: rgba(0, 0, 0, 0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 280px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 360px; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
    font-family: Droid Arabic Kufi; 
    font-size: xx-large; 
} 

На мыши над, у меня есть текст, который должен быть дисплей на изображении.

Мне нужно, чтобы этот текст был постоянным в нижней части изображения, и когда мышь над ним пойдет вверх.

Что я имею в виду, в последнем 50px изображения Я хочу, чтобы черный фон с постоянным текстом и когда мышь над той же функциональностью будет работать.

Благодарим вас за советы.

Answer 1

Это то, что вы пытались достичь? Fiddle

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-spacing: 0; 
 
    top: 0; 
 
} 
 
ul.img-list { 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 
ul.img-list { 
 
    border-spacing: 0; 
 
    display: inline-block; 
 
    height: 150px; 
 
    position: relative; 
 
    width: 360px; 
 
} 
 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    margin-top: -280px; 
 
    height: 280px; 
 
    -webkit-transition: 500ms; 
 
    -moz-transition: 500ms; 
 
    -o-transition: 500ms; 
 
    transition: 500ms; 
 
} 
 
span.text-content { 
 
    background: black; 
 
    position: relative; 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 50px; 
 
    left: 0; 
 
    top: -5px; 
 
    width: 360px; 
 
    opacity: 1; 
 
    -webkit-transition: 500ms; 
 
    -moz-transition: 500ms; 
 
    -o-transition: 500ms; 
 
    transition: 500ms; 
 
    font-family: Droid Arabic Kufi; 
 
    font-size: xx-large; 
 
    z-index: 2; 
 
}

<ul class="img-list"> 
 
    <li> 
 
    <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"> 
 
      <span>Text To Display</span> 
 
    </span> 
 
    </li> 
 
</ul>

Answer 2

Я обновил свой JSFiddle: http://jsfiddle.net/chimos/ynrsh3ue/1/

Вам нужно удалить и изменить некоторые правила CSS для достижения этой цели:

ul.img-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    text-align: center; 
} 
ul.img-list { 
    display: inline-block; 
    height: 150px; 
    margin: 0 5px 1em 0; 
    position: relative; 
    width: 360px; 
    margin-top:-5px; 
} 
ul.img-list li { 
    position: relative; 
} 
span.text-content span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 
ul.img-list li:hover span.text-content { 
    height: 280px; 
    /*opacity: 1;*/ 
} 
span.text-content { 
    background: rgba(0, 0, 0, 0.5); 
    z-index: 999; 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    bottom: 0; 
    width: 360px; 
    /*opacity: 0;*/ 
    -webkit-transition: height 500ms; 
    -moz-transition: height 500ms; 
    -o-transition: height 500ms; 
    transition: height 500ms; 
    font-family: Droid Arabic Kufi; 
    font-size: xx-large; 
} 

Answer 3

Сначала вы определяете span.text-контент повторно.

Во-вторых, я изменил ваш css. Проверьте скрипку http://jsfiddle.net/ynrsh3ue/2/

ul.img-list 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    display: inline-block; 
    height: 150px; 
    margin: 0 5px 1em 0; 
    position: relative; 
    width: 360px; 
    margin-top:-5px; 

} 

span.text-content span 
{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: bottom; 
    -webkit-transition: all 500ms; 
    -moz-transition: all 500ms; 
    -o-transition: all 500ms; 
    transition: all 500ms; 
} 


ul.img-list li:hover span.text-content 
{ 
    opacity: 1; 
    background: rgba(0,0,0,0.5); 
    height:280px; 
    top:0px; 
} 

ul.img-list li:hover span.text-content span 
{ 
    vertical-align:middle; 
} 
span.text-content 
{ 
    background: rgba(0,0,0,1); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 50px; 
    left: 0; 
    position: absolute; 
    top: 230px; 
    width: 360px; 
    opacity: 1; 
    -webkit-transition: all 500ms; 
    -moz-transition: all 500ms; 
    -o-transition: all 500ms; 
    transition: all 500ms; 
    font-family: Droid Arabic Kufi; 
    font-size: xx-large; 
}