We Keep Coding

How to fade out images on click

I recently got into coding and I'm enjoying it pretty much. With that being said, I'm pretty new to it and very... rookie. I was wondering if there's a way I can make my centered Icon fade out instead of just disappearing on click. The same goes for the overlay that I've created.
function functionHide(divId, divId2, ) {
let x = document.getElementById(divId);
let y = document.getElementById(divId2);
x.style.display = "none";
y.style.display = "block";
}
#icon {
content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
height: 256px;
width: 256px;
top: 50%;
left: 50%;
position: fixed;
margin-top: -128px;
margin-left: -128px;
z-index: 1;
transition: .4s ease;
display: block;
}
#overlay {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
}
#icon:hover {
cursor: pointer;
transform: scale(1.5);
transition: transform .4s;
}
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
<div id="overlay"></div>
</div>

There is a good fade in example.
Use an animation in the hide class, for example:
.hide {
animation-name: fadeOut;
animation-duration: 3s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Remember to use browser extensions like -webkit or -moz.

Use a #keyframes animation or change the opacity of the image, granted that the transition was set.
#keyframes
function functionHide(divId, divId2, ) {
let x = document.getElementById(divId);
let y = document.getElementById(divId2);
x.style.animation = "fadeOut 0.2s forwards";
y.style.animation = "fadeOut 0.2s forwards";
}
#icon {
content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
height: 256px;
width: 256px;
top: 50%;
left: 50%;
position: fixed;
margin-top: -128px;
margin-left: -128px;
z-index: 1;
transition: .4s ease;
display: block;
}
#overlay {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
}
#icon:hover {
cursor: pointer;
transform: scale(1.5);
transition: transform .4s;
}
#keyframes fadeOut{
from{
opacity:1;
}
to{
opacity:0;
}
}
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
<div id="overlay"></div>
</div>
Explanation
fadeOut 0.2s forwards
^ ^ ^
name of animation
duration of animation
instructs the animation to run once, then stay in the same state after animation
Or you can consider using the jQuery fadeOut() function like so:
function functionHide(divId, divId2, ) {
let x = document.getElementById(divId);
let y = document.getElementById(divId2);
$(x).fadeOut();
$(y).fadeOut();
}
#icon {
content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
height: 256px;
width: 256px;
top: 50%;
left: 50%;
position: fixed;
margin-top: -128px;
margin-left: -128px;
z-index: 1;
transition: .4s ease;
display: block;
}
#overlay {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
}
#icon:hover {
cursor: pointer;
transform: scale(1.5);
transition: transform .4s;
}
#keyframes fadeOut{
from{
opacity:1;
}
to{
opacity:0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
<div id="overlay"></div>
</div>

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>

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

How to to toggle a menu container when clicked on menu item

I am a beginner in JS.
I found a mobile menu on codepen but I need to edit it to make it right for what i need.
Basically, the mobile menu I need to create contains few links that have anchors and redirect users to sections in the page.
The codepen example I found doesn't close the menu once a link is clicked. I tried to modify the code myself but it doesn't work.
Here the link to the original codepen: https://codepen.io/Gatsby/pen/YdWGgW
And this is the version I did but not working.
(function () {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let all = document.querySelectorAll('.menu-item');
icon.onclick = function () {
header.classList.toggle('menu-open');
}
all.onclick = function () {
header.classList.toggle('menu-open');
}
}());
Any help would be greatly appreciated. Thank you.

You can do it this way :
Basically, you get all of the menu classes, and add an event listener on them to close the menu on each click on any of them
(function() {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let menu_item = document.getElementsByClassName('menu-item');
icon.onclick = function() {
header.classList.toggle('menu-open');
}
var close = function() {
header.classList.toggle('menu-open');
};
for (var i = 0; i < menu_item.length; i++) {
menu_item[i].addEventListener('click', close, false);
}
}());
#import url(https://fonts.googleapis.com/css?family=Nobile);
/* Just container/placeholder rulesets - remove once in production */
body {
font-family: "Nobile";
margin: 0 auto;
line-height: 1.5;
background: #e0e0e0;
}
.container {
background: #f0f0f0;
position: relative;
overflow: hidden;
width: 375px;
height: 600px;
margin: 50px auto 0;
box-shadow: 0 0 50px 10px #aaa;
}
.container .header {
position: absolute;
display: block;
top: 0;
left: 0;
}
.content {
padding: 40px 5% 20px;
text-align: justify;
max-height: 100%;
color: #333;
overflow-y: scroll;
}
.content img {
width: 100%;
position: relative;
display: block;
margin: 40px auto 30px;
}
#media (max-width: 480px) {
.container {
margin: 0 auto;
width: 100%;
height: 100%;
box-shadow: none;
}
.container .header {
position: fixed;
}
.content {
overflow-y: hidden;
}
}
/* End container/placeholder */
/* Menu Header */
.header {
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
height: 55px;
width: 100%;
z-index: 1;
position: fixed;
transition: all 0.4s ease-out, background 1s ease-out;
}
.header.menu-open {
height: 100%;
background: #111;
transition: all 0.45s ease-out, background 0.8s ease-out;
}
/* Menu List items */
.mobile-menu {
clear: both;
}
.header ul.menu {
position: relative;
display: block;
padding: 0px 40px 0;
list-style: none;
}
.header ul.menu li.menu-item a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 2.8;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.header ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.3s;
}
.header ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.25s;
}
.header ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.15s;
}
.header ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.1s;
}
.header ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item {
opacity: 1;
}
.header.menu-open ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.1s;
}
.header.menu-open ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.15s;
}
.header.menu-open ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header.menu-open ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.25s;
}
.header.menu-open ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.3s;
}
.header.menu-open ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.35s;
}
/* Menu Icon */
.icon-container {
position: relative;
display: inline-block;
z-index: 2;
float: right;
/* Simply change property to float left to switch icon side :) */
height: 55px;
width: 55px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.icon-container #menuicon {
width: 20px;
height: 10px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
#menuicon .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#menuicon .bar.bar1 {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
#menuicon .bar.bar2 {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.menu-open .icon-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-open .icon-container #menuicon .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.1s;
}
.menu-open .icon-container #menuicon .bar.bar1 {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.menu-open .icon-container #menuicon .bar.bar2 {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
<div class="container">
<div class="header">
<div class="icon-container">
<div id="menuicon">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</div>
</div>
<div class="mobile-menu">
<ul class="menu">
<li class="menu-item">Mac
</li>
<li class="menu-item">iPad
</li>
<li class="menu-item">iPhone
</li>
<li class="menu-item">Watch
</li>
<li class="menu-item">TV
</li>
<li class="menu-item">Music
</li>
<li class="menu-item">Support
</li>
</ul>
</div>
</div>
<div class="content">
<img src="https://images.apple.com/v/iphone/home/y/images/overview/hero-iphone-xr_large.jpg" alt="" />
<p>“With so many trees in the city, you could see the spring coming each day until a night of warm wind would bring it suddenly in one morning. Sometimes the heavy cold rains would beat it back so that it would seem that it would never come and that
you were losing a season out of your life. This was the only truly sad time in Paris because it was unnatural. You expected to be sad in the fall. Part of you died each year when the leaves fell from the trees and their branches were bare against
the wind and the cold, wintry light."</p>
<p><em>- Ernest Hemingway, A Moveable Feast</em></p>
<img src="https://images.apple.com/v/iphone/home/y/images/overview/film_large.jpg" alt="" />
<p>"On under the heavy trees of the small town that are a part of your heart if it is your town and you have walked under them, but that are only too heavy, that shut out the sun and dampen the houses for a stranger; out past the last house and on to
the highway that rose and fell straight away ahead with banks of red dirt sliced cleanly away and the second growth timber on both sides. It was not his country but it was the middle of fall and all of this country was good to drive through and
to see. "</p>
<p><em>- Ernest Hemingway, "Fathers and Sons"</em></p>
</div>
</div>
Here I am using document.getElementsByClassName but you could also use document.querySelectorAll which is more useful if you want to use more complex selectors

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.