We Keep Coding

Why the hamburger menu does not display correctly in Firefox and does not open on one page?

I have a few pages. On all menu pages the hamburger works correctly, except for the main page. On the main page, the hamburger menu does not open, although javascript is connected everywhere, I checked. Also, in the browser Firefox, the last is much lower than it should, although in other browsers everything is displayed correctly. What could be the mistake?
if ('ontouchstart' in window) {
var click = 'touchstart';
} else {
var click = 'click';
}
$('div.burger').on(click, function() {
if (!$(this).hasClass('open')) {
openMenu();
} else {
closeMenu();
}
});
$('div.menu ul li a').on(click, function(e) {
e.preventDefault();
closeMenu();
});
function openMenu() {
(document.getElementById("see").setAttribute("style", "display: block; z-index: 30;"));
$('div.burger').addClass('open');
$('div.x, div.z').addClass('collapse');
setTimeout(function() {
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function() {
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu() {
$('.menu li').removeClass('animate');
(document.getElementById("see").setAttribute("style", "display: none; z-index: 20;"));
setTimeout(function() {
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.menu-bg').removeClass('animate');
setTimeout(function() {
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function() {
$('div.y').show();
$('div.x, div.z').removeClass('collapse');
}, 70);
}, 100);
}
.container_header {
background: url(../img/img1.jpg) top center no-repeat;
position: relative;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
height: 960px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.container-header a {
float: left;
color: #000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 10px;
}
.firstname {
font-size: 7.5rem;
color: #000;
position: absolute;
margin-top: 7%;
margin-left: 52%;
z-index: 1;
}
.firstname p {
margin-left: 50px;
}
.nav {
display: block;
}
.nav a {
position: fixed;
z-index: 10;
left: -278px;
transition: 0.3s;
width: 310px;
color: #000000;
border: 1px solid black;
margin-top: 27%;
padding: 15px;
font-size: 24px;
text-decoration: none;
line-height: 40px;
text-align: center;
}
#media screen and (max-width: 1024px) and (min-width: 381px) {
.parallax {
background-attachment: scroll;
}
.menu {
display: none;
background-image: url(../img/Фон.png);
height: 100%;
position: relative;
z-index: 20;
}
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
z-index: 30;
}
div.x,
div.y,
div.z {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
background: #000;
border-radius: 2px;
-webkit-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x,
div.y,
div.z {
height: 3px;
width: 26px;
}
div.y {
top: 18px;
}
div.z {
top: 37px;
}
div.collapse {
top: 20px;
-webkit-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.menu-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="container_header">
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">
<li class="home"><a class="icon home_bar" href="index.html"><span>Text</span></a></li>
<li class="gallery"><a class="icon gallery_bar" href="pages/gallery.html"><span>Text</span></a></li>
<li class="ut"><a class="icon ut_bar" href="pages/usefulTips.html"><span>Text</span></a></li>
<li class="contact"><a class="icon contact_bar" href="pages/contacts.html"><span>Text</span></a></li>
<li class="journal"><a class="icon journal_bar" href="#"><span>Text</span></a></li>
</ul>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</nav>
<div class="firstname">
<h1 class="name-main">Text
<p>Text</p>
</h1>
</div>
</header>

navbar help - flickering

My nav-bar benefits from a function that, once you scroll slightly, the navbar becomes smaller. I have also added a logo that changes on scroll. But during the logo change animation when you scroll UP the page, there is some really bothersome flickering. I believe it's an issue with my JS. Could you please have a look and tell me what you are experiencing? Thanks.
$(document).on("scroll", function() {
if ($(document).scrollTop() > 2) {
$('.miniBanner').addClass('show')
$('.logoBanner').addClass('hide')
$("header").addClass("shrink")
$("header").removeClass("grow")
} else {
$('.miniBanner').removeClass('show')
$('.logoBanner').removeClass('hide')
$("header").removeClass("shrink");
$("header").addClass("grow")
}
});
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
header {
width: 100%;
padding: 30px 0px;
/* revert to 50px 0px if we want the scroll animation */
/*animation magic*/
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: sticky;
margin: 0;
background-color: white;
box-shadow: 1px 1px 16px 2px red;
}
.shrink {
padding: 10px 0;
box-shadow: 1px 1px 16px 2px #0000a0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
}
.grow {
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.shrink .logoBanner {
width: 8vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.grow .logoBanner {
width: 100vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner {
display: none;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner.show {
display: flex;
transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
width: 5vw
}
.logoBanner.hide {
visibility: hidden;
opacity: 0;
display: none;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
list-style: none;
width: 90%;
padding: 0;
margin: 0;
}
a {
width: 80px;
display: block;
margin: 5px;
border-radius: 15px;
padding-top: 5px;
}
li {
justify-content: center;
text-align: center;
}
li a {
background-color: white;
text-decoration: none;
color: #0000a0;
}
.logo {
/* brand guidelines */
display: flex;
justify-content: flex-start;
margin-right: 70%;
justify-content: center;
align-items: center;
}
.logoBanner {
width: 250vw;
background-color: white
}
.page {
height: 200vh;
width: 100vw;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
</script>
<body>
<header>
<ul>
<a href="#" class="logo">
<img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
<img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
</a>
<li>Portal</li>
<li>Feedback</li>
<li>Logout</li>
</ul>
</header>
<div class=page></div>
</body>

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"/>

Add hover effect on click and remove again if clicked again

I have made a product block with the option to see on hover a nice effect but i would like to see the hover effect which I am seeing on hover to be seen on click of the div but I don't know how I can achieve that.
The only thing I want is to have it completely in css/sass or Javascript if it cannot be done with Javascript or css/sass then jQuery is ok.
body {
width: 100%;
height: 100%;
background-color: #c8cfdc;
color: #363636;
font-family: 'Roboto', sans-serif;
}
.blocks_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px 0;
width: 90%;
margin: 0 auto;
max-width: 1170px;
}
.block {
background-color: #fff;
cursor: pointer;
margin-bottom: 20px;
}
.product_block {
width: 31%;
overflow: hidden;
position: relative;
height: 340px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.product_block .product_header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 55px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15), -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
}
.product_block .product_header .product_heart {
float: left;
margin-top: 15px;
padding-left: 30px;
}
.product_block .product_header .product_heart img {
width: 20px;
height: 20px;
}
.product_block .product_header .product_tag {
position: absolute;
top: 15px;
left: 50%;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #fff;
text-transform: uppercase;
font-family: 'Ropa Sans', sans-serif;
background-color: #3b4068;
padding: 4px 15px;
border-radius: 0.8em;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.product_block .product_header .product_shop {
float: right;
margin-top: 15px;
padding-right: 30px;
}
.product_block .product_header .product_shop img {
width: 20px;
height: 20px;
}
.product_block .product_img {
margin: 0 auto;
width: 95%;
height: 260px;
background-size: contain;
background-position: 50% 80%;
background-repeat: no-repeat;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
transition: all 900ms ease;
}
.product_block .product_info {
transform: translate(0px, 200px);
text-align: center;
padding-top: 20px;
}
.product_block .product_info .product_title {
font-size: 16px;
font-family: 'Ropa Sans', sans-serif;
text-transform: uppercase;
margin-bottom: 5px;
}
.product_block .product_info .product_subtitle {
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
color: #999;
margin: 0;
margin-bottom: 15px;
}
.product_block .product_info .product_price {
font-family: 'Ropa Sans', sans-serif;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
}
.product_block .product_info .product_price span {
text-decoration: line-through;
color: #fc7070;
padding-left: 9px;
}
.product_block:hover {
transition: all 300ms ease;
background-color: #3b4068;
color: #fff;
}
.product_block:hover .product_header {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product_block:hover .product_header .product_tag {
background-color: #fff;
color: #3b4068;
}
.product_block:hover .product_img {
transition: all 300ms ease-in-out;
-webkit-transform: scale(1.03);
transform: scale(1.03);
background-position: 30% 30%;
width: 40%;
-ms-transform: rotate(20deg);
/* IE 9 */
-webkit-transform: rotate(20deg);
/* Safari */
transform: rotate(20deg);
}
.product_block:hover .product_info {
transition: all 300ms ease;
transform: translate(0px, -150px);
text-align: center;
padding-top: 20px;
}
<div class="blocks_container">
<div class="block product_block rem" id="red">
<div class="product_header">
<div class="product_heart"> <img src="http://calleriphotographer.it/loving.svg"/></div>
<!-- <div class="product_tag">Waffle</div> -->
<div class="product_shop"><img src="http://calleriphotographer.it/cart.svg"/></div>
</div>
<div class="product_img" style="background-image: url('http://calleriphotographer.it/nike.png')"></div>
<div class="product_info">
<h3 class="product_title">nike</h3>
<h5 class="product_subtitle">Air Max Tavas SD</h5>
<p class="product_price">$160.00<span>$200.00</span></p>
</div>
</div>
</div>
If you want to edit it in codepen with sass click below
my codepen link

You just need an active state for you .product_block element
CSS
.product_block.active:hover {
transition: all 300ms ease;
background-color: #3b4068;
color: #fff;
}
.product_block.active:hover .product_header {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product_block.active:hover .product_header .product_tag {
background-color: #fff;
color: #3b4068;
}
.product_block.active:hover .product_img {
transition: all 300ms ease-in-out;
-webkit-transform: scale(1.03);
transform: scale(1.03);
background-position: 30% 30%;
width: 40%;
-ms-transform: rotate(20deg);
/* IE 9 */
-webkit-transform: rotate(20deg);
/* Safari */
transform: rotate(20deg);
}
.product_block.active:hover .product_info {
transition: all 300ms ease;
transform: translate(0px, -150px);
text-align: center;
padding-top: 20px;
}
JS
var elem = document.querySelector('.product_block');
elem.addEventListener("click", function(){
this.classList.add('active');
})
P.S. JSFiddle

Toggle logic
var elem = document.querySelector('.product_block');
elem.addEventListener("click", function(){
if(this.classList.contains('active')) {
this.classList.remove('active');
} else {
this.classList.add('active');
}
})

You need to query all items and then iterate over them
Like that:
var elems = document.querySelectorAll('.product_block');
for(var i = 0; i < elems.length; i = i +1) {
elems[i].addEventListener("click", function(){
if(this.classList.contains('active')) {
this.classList.remove('active');
} else {
this.classList.add('active');
}
})
}

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.