JSFiddle - React, Tailwind, and code Playground
HTML
<div class='mtours_krug'>Навести</div>
<div style='width:200px;height:200px;background-color: red;' class='mtours_info'></div>
CSS
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.mtours_info {
display: none;
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: .7s;
animation-duration: .7s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
.mtours_krug:hover + .mtours_info, .mtours_info:hover {
display: block;
}