Dilbert Dilbert - 2 months ago 10
Sass (Sass) Question

How to ensure both scale and slide up can occur for dynamic text using css and js?

Please find this CodePen: http://codepen.io/hellouniverse/pen/rrVddV

I have a sample image and text that is obtained using an

Ajax
call. I cannot show the Ajax call, so on the CodePen I have included a mimic that tried to make as similar as I could. The text is dynamically added after the image.

When hovered, I want to ensure that there is a zoom effect on the image and also have the text slide up nicely. Right now, the zoom kind of works, while the text does not slide up, but basically jumps to the top!!!

I cannot get it working no matter how many coffees I drink or how many times I swear at IntelliJ. I must be making a very minor mistake somewhere and would appreciate any help.

Basically, I want to do the following on hover:


  • The text slides up on hover and slides down on mouse out

  • The image has a zoom effect (at scale 1.1) on hover and scales back on mouse out

  • Also, the width and the height of the div (block__Content) should not increase at all (but is currently expanding because of the scale).





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>




Answer

A little change in your CSS and jQuery will lead you to achieve this easily.

Here's the updated Codepen

Updated 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);
    }
}

Updated jQuery:

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

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