CSS / HTML Text Перемещение при наведении курсора и отображение дополнительного текста

Question

Итак, у меня есть этот контейнер, который я хочу, чтобы ссылка в левом нижнем углу слегка двигалась вверх при наведении, чтобы показать больше, меньший текст внизу!У меня есть ссылка, которая содержит пример того, что я пытаюсь сделать.Извините, если некоторые из CSS - беспорядочный беспорядок, только вернулся в это и любопытное изучение, поскольку я иду.Я тщательно исследовал и искал ответ.Даже если вы можете просто связать меня со страницей, которая поможет, я буду очень благодарен.

Веб-сайт здесь

JSFiddle У меня пока

HTML:

<div class ="body_paragraph">
    <div class="body_container">
        <h3><a href="progress">This is the Link</a></h3>
    </div>
</div>

CSS:

.body_paragraph{
    background-color: #222;
    border: 2px solid #111;
    width: 1000px;
    margin: auto;
    margin-top: 50px;
    font-family: Arial;
    font-weight: bold;
    color: #DDDDDD;
    padding: 2px;
    min-height: 500px;

}

.body_container h3{
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    position: absolute;
    bottom: 1px;
    left: 10px;
}

.body_container h3 a{
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.body_container h3 a:hover{
    font-family: Arial;
    font-weight: bold;
    color: #009dff;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.body_container{
    background-color: #333;
    border: 1px solid #111;
    width: 998px;
    font-family: Arial;
    font-weight: bold;
    font-size: 14px;
    color: #DDDDDD;
    min-height: 299px;
    box-shadow: 1px 5px 10px #111;
    position: relative;

}

Answer 1

$(".link").hover(function() {
    	$(".text-info").html("Some texts here.");
    }, function() {
      $(".text-info").html("");
});

.body_container {
  background: tomato;
  display: flex;
  flex-direction: column;
  height: 80px;
}
a {
  padding-top: 30px;
  position: relative;
  display: block;
  transition-duration: 0.5s;
}
a:hover {
  padding-top: 0px;
  transition-duration: 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class ="body_paragraph">
    <div class="body_container">
        <a href="progress" class="link"><h3>This is the Link</h3></a>
        <div class="text-info"> </div>
    </div>
</div>

Это то, к чему вы хотите двигаться?

Answer 2

Ваш пример веб-сайта состоит в том, что они сначала сделали непрозрачность нижнего текста как 0 , а затем присвоили ему отрицательное поле , чтобыосновной текст и нижний текст могут перекрываться.Но помните, что из-за opacity , поскольку 0 под текстом не будет виден сейчас.Поэтому, когда вы наводите указатель мыши на основной текст , вы можете убрать отрицательное поле и сделать непрозрачность 1 из нижнего элемента .Вот как пример сайта, приведенный вами, делает эту вещь. Для этого не требуется javascript .

Answer 3

Вы используете этот код

.body_container h3 a:hover{ transform: translateY(-10px); display:block; }

Вы можете изменить значение -10px