We Keep Coding

How do I make this hover caption work properly?

In the photoset block it had this hover with a "readmore" text that appeared when I hovered over the picture. All I did was replace inside the readmore block with the CMS caption
This has caused the hover to not work right as the block and the caption appear separately.
The website is compassionlens.photo to check out the full code but the CMS elements do not populate in dev tools. Let me know if you need to see more of the code. Can you help me figure out how to make the caption appear when I hover over the photo?
{block:Photo}
<figure>
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="
{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{/block:PermalinkPage}
{block:IndexPage}{LinkOpenTag} <img src=" .
{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}"
height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{block:Caption}<figcaption>{Caption} .
</figcaption>{/block:Caption}
{/block:IndexPage}
</figure>
{block:PermalinkPage}
<div class="post_photo_content_wrapper">
{block:Caption}
<div class="post_content">{Caption}</div>
{/block:Caption}
<div class="post_actions
{block:Caption}with_caption{/block:Caption} clearfix">
{/block:Photo}
.post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption {
opacity: .75;
}
.post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption {
opacity: .75;
}

I think i understand what you want now. I have made it work using
the CSS hover effect as show below
.image {
width: 400px;
}
.overlay {
position: absolute;
top: 30px;
left: 40px;
height: 100px;
width: 100px;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.image:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="image">
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="google">
<div class="overlay">
<p class="text">This is a text</p>
</div>
</div>

I think what you are looking for is tooltips. w3schools has a good site about them. This is what they look like
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here is the site if you want to learn more
https://www.w3schools.com/css/css_tooltip.asp
Edit:
If you want to do this for an image, take a look at this other post
Tooltip on image
Here you will see that you need to use the attribute "title", just as shown below
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="alternative text" title="this will be displayed as a tooltip"/>

Transition effect not working when added display attribute

Requirement is to put transition effect on redeem now button. Initially redeem now button is hidden, on hover it will display the redeem now button with transition
Problem is I have added display: none for redeem now button and on hover its showing display: block.
Below is my code
.wpf-demo-3 {
background-color: #FFF;
display: block;
width: 265px;
height: 300px;
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align: center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
display: block !important;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
display: none !important;
}
<div class="col-xs-12 col-sm-3 col-md-3 text-center item-spacing" style=" margin: 0px; padding: 0px;" >
<div class="item hot-deals-wrapper clearfix item-spacingies " style="height: 300px;">
<div class="wpf-demo-3">
<h5> <strong><a style="color:#000;text-decoration:none" data-bind="text:name,attr:{href:redirectLink}"></a></strong> </h5>
<div data-bind="ifnot: mediumImage">
<div class="img-wrapper"> <a data-bind="attr:{href:redirectLink}"><img src="https://d2kbtrec8muwrn.cloudfront.net/assets/web/fnp/fnp/basket/B28.jpg"/></a> </div>
</div>
<div> <i class="fa fa-share-alt share-icon socialicons"></i>
<div style="display:none" class="alert_list"> </div>
</div>
<a href = "https://www.google.co.in/" class = "view-caption">
<button class="btn btn-default pb-bg-red bottommarginmore redeemNowBtn " style=" width: 128px; margin-top: 25px;">Redeem Now</button>
</a> </div>
</div>
</div>

You can try this instead of dispaly property
CSS CODE:
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align:center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
opacity: 1;
visibility: visible;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
opacity: 0;
visibility: hidden;
}
DEMO:
https://jsfiddle.net/JentiDabhi/k5c6net2/

When switching from a display:none to a display:block with CSS transitions, try using a Javascript setTimeout with a small delay as an intermediary. The transitions can't apply to a display:none situation.
To do this you'd need to use a hover event, rather than a hover CSS selector.
In CSS, try changing .wpf-demo-3:hover .view-caption to just .view-caption.transition. Also, remove the display: block; and display:block !important; declarations.
Also, remove the display: none !important; from the .wpf-demo-3 .view-caption declaration.
Then in Javascript try something like (using jQuery syntax for example simplicity):
$('.wpf-demo-3').hover(function(){
$('.view-caption').show();
setTimeout(function(){
$('.view-caption').addClass('transition');
}, 10);
}, function(){
$('.view-caption').removeClass('transition');
setTimeout(function(){
$('.view-caption').hide();
}, 510);
});
The setTimeout in the last hover function is set to 510ms so that it is 10ms after the CSS transition timing of 0.5s.

Divs are not flipping on IE

Pre-story: I am using CSS and jQuery to create a flipping effect.
How I am achieving it: For that purpose I am using preserve-3d.
Good news: It works all fine on all major browsers
Problem: It does not work in IE.
Solution approach: Initially I thought it is not applying the preserve but then I think it is just not firing the back element.
Help: Can you please help, link to my JSFiddle
function flip() {
$('.card').toggleClass('flipped');
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>

As described in the remarks it's a compatibility issue with IE.
I suggest a simple workaround, hoping it could help:
var ua = window.navigator.userAgent;
var msie = (ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) ? true : false;
var i = 0;
function flip() {
$('.card').toggleClass('flipped')
if (msie) {
// the timeout happens after 400ms because on my computer this create the right effect
i = (i + 1) % 2;
setTimeout(function (i) {
$('.card > div:eq(' + i + ')').css('backface-visibility', 'visible');
$('.card > div:not(:eq(' + i + '))').css('backface-visibility', 'hidden');
}, 400, i);
}
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>

How to scale a div on clicking a button

Code:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
});
});
.ham-layer {
height: 50px;
width: 50px;
background: #fff;
margin: 0px;
top: 0;
left: 0;
position: fixed;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0;
}
#nav-icon {
position: fixed;
left: 35px;
top: 0px;
width: 32px;
height: 20px;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span {
background: #111111;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 1px;
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 2px;
}
#nav-icon.open .ham-layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
opacity: 1;
}
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="ham-layer"></div>
<!-- <i class="fa fa-bars hamburger"></i> -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
<p id="_intro" class="text-center"></p>
<hr width=40%>
<p id="belowIntro" class="text-center"></p>
</div>
</div>
</div>
</section>
I wanted to make it so that when the hamburger icon is clicked, the layer scales itself up thus showing the menu. But the scaling part is not happening. What should I do so that this happens? Right now the hamburger icon is animating but the circular div isn't expanding.

It is because your .ham-layer is not inside of your #nav-icon. Your last CSS selector #nav-icon.open .ham-layer implies that .ham-layer is somewhere inside of your #nav-icon div.

Tumblr style UserHoverCard

Hi everyone i have one problem with ajax hover. I am trying to make a userHoverCard like tumblr. But the hover animation not working when i use it with ajax.
This is working DEMO without ajax only css. In this demo you can see when you hover image then .p-tooltip will open with animation effect.
But if you click this DEMO from my test page then you can see when you hover an image then .p-tooltip will not open with animation effect.
HTML
<div class="p-tooltip"></div>
<div class="summary" data-id="25">
</div>
<div class="summary" data-id="20">
</div>
<div class="summary" data-id="25">
</div>
This is my ajax code:
$(document).ready(function() {
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from get_profile.php
$.ajax({
url: 'get_profile.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide().fadeIn('fast');
}
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
setTimeout(function(){
hideProfileTooltip();
},2000);
});
});
And here is CSS code:
.summary {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.profile-ava {
width: 50px;
height: 50px;
background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
border-radius: 3px;
background-size: 50px 50px;
display: block;
}
.summary a:hover:before {
content: '';
position: absolute;
display: block;
bottom: -10px;
left: 0;
height: 10px;
width: 100%;
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-ava {
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;
}
.summary:hover .p-tooltip {
visibility: visible;
opacity: 1;
max-height: 600px;
}
.summary:hover .profile-header,
.summary:hover .profile-info,
.summary:hover .p-tooltip .profile-ava,
.summary: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;
}
Anyone can help me please!

Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.
FIDDLE
.summary {
margin: -50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 0;
}
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 1;
}
.loaded .summary-mask {
z-index: -1;
}
HTML
<div class="the-container">
<div class="summary-mask"></div>
<div class="summary" data-id="100">
<div class="user-container"></div>
</div>
</div>
JS
var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> Follow <p class="profile-nick"> Page Name </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('.user-container').html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});

When you are showing the card, it only contains the loading message. When the content arrives and you put it in the card, that isn't a CSS change, so the transition isn't activated.
If you wait until the content has arrives to show the card, there is something to animate.