Как обеспечить масштабирование и скольжение для динамического текста с помощью css и js?

Найдите этот CodePen: http://codepen.io/hellouniverse/pen/rrVddV

У меня есть образец изображения и текста, полученный с помощью вызова Ajax. Я не могу показать вызов Ajax, поэтому на CodePen я включил имитатор, который пытался сделать как можно более похожим. Текст динамически добавляется после изображения.

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

Я не могу заставить его работать независимо от того, сколько кофе я пью или сколько раз ругаюсь на IntelliJ. Должно быть, я где-то делаю очень незначительную ошибку и буду признателен за любую помощь.

По сути, я хочу сделать следующее при наведении курсора:

  • Текст скользит вверх при наведении и скользит вниз при выходе из мыши
  • Изображение имеет эффект масштабирования (в масштабе 1,1) при наведении и уменьшается при удалении мыши.
  • Кроме того, ширина и высота div (block__Content) вообще не должны увеличиваться (но в настоящее время расширяются из-за масштаба).

 var $title = "MY Title";
 var $summary = "My Summary";
 var $ctaText = "A CTA TEXT";
 // Here is the mimic I described;
 // The data is actually obtained using an Ajax call (which I cannot replicate here):
 var $contentHover = "<div class='content-added contenthover'></div>";

 $('.myImage').after($contentHover); // Add the div that will be targeted for the hover

 var $contentHoverHeader = "<h2 class='contenthover__header'>" + $title + '</h2>';
 var $contentHoverContent = "<p class='contenthover__content'>" + $summary + '</p>';
 var $contentHoverLink = "<a class='contenthover__link' href='#'>" + $ctaText + '</a>';

 $('.contenthover').append($contentHoverHeader, $contentHoverContent, $contentHoverLink);
 $('.contenthover').hover(function() {

   $('.contenthover').css({
     display: 'inline-block',
     width: '100%',
     height: '278px',
     position: 'absolute',
     bottom: '0',
     transition: 'bottom 500ms ease-out'
   })
 });
.block__content {
  max-width: 1280;
  margin: 0 auto;
  display: inline-block;
}
.block__content {
  width: auto;
  height: 278px;
}
.contenthover {
  display: none;
}
.bgtile {
  background-repeat: no-repeat;
  &: hover, &: focus {
    cursor: pointer;
    height: 278px;
    transform: scale(1.1);
    transition: all 500ms ease-in-out;
  }
}
.node__content {
  span {
    display: none;
    // NO to the text } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block__content">
  <div class="content-tile">
    <article role="article" class="node sb-article bgtile" style="background-image: url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');">
      <div class="node__content">
        <span>DO NOT DISPLAY ME</span>
        <div class="myImage">
          <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="A large image" typeof="Image">
        </div>
      </div>
    </article>
  </div>
</div>


javascript html jquery css sass
person Community    schedule 08.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Небольшое изменение в вашем CSS и jQuery поможет вам легко добиться этого.

Вот обновленный Codepen.

Обновленный SCSS:

.block__content {
    max-width: 1280px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
}

.block__content {
    width: auto;
    height: 278px;
    overflow: hidden;
}

.contenthover {
    bottom: -278px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    transition: all 500ms ease-in-out;
}

.bgtile {
    background-repeat: no-repeat;
    cursor: pointer;
    height: 278px;
    img {
        transform: scale(1);
        transition: all 500ms ease-in-out;
    }
    &:hover img,
    &:focus img{
        transform: scale(1.1);
    }
}

Обновлен jQuery:

$('.bgtile').mouseover(function() {
    $('.contenthover').css({
        bottom: '0'
    })
});

$('.bgtile').mouseout(function() {
    $('.contenthover').css({
        bottom: '-100%'
    })
});
person vivekkupadhyay    schedule 08.09.2016