0

Hi everyone i have one problem with CSS hover animation. I have created Two demo :

First DEMO animation is working well. But seconde DEMO is not working.

So in second demo you can see there is two name for example Paul and Rihanna When you hover the Paul's name then the hovercard will open but without animation. But if you check first demo then you can see the animation working on there. Anyone can help me what i am missing to working second demo like first demo.

AJAX:

var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> <a href="http://kraigo.tumblr.com/" class="profile-action">Follow</a> <p class="profile-nick"> <a href="http://kraigo.tumblr.com/">Page Name</a> </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) {
                e.find('.k-isim-wrp').html(returnHtml).promise().done(function () {
                    $('.kisi-isim').addClass('loaded');
                });
            }
        });

    }

    function hideProfileTooltip() {
        $('.kisi-isim').removeClass('loaded');
    }
    $('.kisi-isim').hover(function (e) {

        var id = $(this).find('.k-isim').attr('data-id');
        showProfileTooltip($(this), id);

    }, function () {
        hideProfileTooltip();
    });
});

CSS

.k-isim {
    float:left;
    width:auto;
    height:17px;
    font-weight:bold;
    position:relative;
    z-index:0;
}
.kisi-isim{
    float:left;
    width:auto;
    height:17px;
    font-weight:bold;
    position:relative;
}
.kisi-isim-mask {
    width:130px;
    position:relative;
    z-index:1;
}
.loaded .kisi-isim-mask{
    z-index:-1;
}
.profile-nnm {
    width:auto;
    height:17px;
    display:block;
}
.k-isim a:hover:before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:17px;
    left:0;
    z-index:2;
}
.p-tooltip {
    position: absolute;
    margin-top: 10px;
    top: 100%;
    left: 50%;
    margin-left: -140px;
    width: 280px;
    max-height: 120px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #F0F0F0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}
.profile-header {
    height: 120px;
    background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
    background-size: auto 120px;
    background-position: 50%;
}
.profile-navigation {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
.profile-nick {
    color: #fff;
    margin: 0;
    padding: 0.4em 0;
    font-size: 0.8em;
    font-weight: bold;
}
.profile-action {
    float: right;
    background-color: #eee;
    padding: 0.4em;
    border-radius: 2px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: bold;
}
.p-tooltip .profile-nnm {
    margin: -40px auto 0;
    width: 80px;
    height: 80px;
    background-size: 80px;
    border: 3px solid #F0F0F0;
    border-radius: 5px;
}
.profile-info {
    text-align: center;
    padding: 10px;
    opacity: 0;
}
.profile-title {
    font-size: 1.6em;
    margin: 0;
}
.profile-description {
    margin: 0;
    font-size: 0.8em;
}
.profile-items {
    margin: 0px;
    padding: 10px;
}
.profile-items:after {
    content:'';
    display: table;
    clear: both;
}
.profile-items li {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    float: left;
    display: block;
    border-radius: 3px;
}
.profile-items li:not(:first-child) {
    margin-left: 10px;
}
.profile-items li:nth-child(1) {
    background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
    background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
    background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}
.profile-header {
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    transform: translate(0, -50px);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
    opacity: 0;
}
.profile-info {
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
    -webkit-transform: scale(0.5) translate(0, -10px);
    -moz-transform: scale(0.5) translate(0, -10px);
    transform: scale(0.5) translate(0, -10px);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
    opacity: 0;
}
.profile-items li {
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
    opacity: 0;
}
.profile-items li:nth-child(2) {
    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.k-isim:hover .p-tooltip {
    visibility: visible;
    opacity: 1;
    max-height: 600px;
}
.k-isim:hover .profile-header, .k-isim:hover .profile-info, .k-isim:hover .p-tooltip .profile-ava, .k-isim:hover .profile-items li {
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1;
}
Improve this question
6
  • @heri-hehe-setiawan Please check two times Commented Mar 8, 2015 at 22:58
  • as far as I can tell it animates in your second Demo Commented Mar 8, 2015 at 22:58
  • Both demos work for me. I suggest you slow the animation down as the most likely it is just going too fast. Commented Mar 8, 2015 at 22:59
  • @LeoFarmer yes you are right. How can i fix it ? Commented Mar 8, 2015 at 23:00
  • look through your css for the transition, -webkit-transition-delay, -moz-transition-delay, transition-delay values. They are currently set to values such as 0.3. Increase the values e.g to 0.5 and check to see if it is going at a speed you like more. You can keep tweaking until you get it right. Commented Mar 8, 2015 at 23:03

1 Answer 1

Reset to default
1

I didn't verify all your CSS, but I think that you did some changes compared to the working demo which made your demo not working. I think that the problem is when you don't have some margin (or padding) between your text (link or button) and its container, because if you try to hover the text from the right, the animation is working for both texts, but not when hovering it from left, top or bottom, I think that need some time between hovering the container and the text. I added borders to see what I'm talking about :

  • Original working demo : ( look when I do it very fast, the animation is not always working )

enter image description here

  • Your demo :

enter image description here

So to avoid the problem, you have to consider all that. You can, for example, add some padding to your kisi-isim class like what I did here.

Of course, I tried to show you what I think is the origin of the problem, and how you can avoid it. You have to edit your code to get the result that you are looking for with the manner that you like.

Hope that can help.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.