I have a div tab on the right side of the screen in the middle and when I try to resize the window it moves the the bottom right of the screen. I would like to to stay in the middle regardless of screen size. How could I accomplish this with my current code? I've tried margin-left:auto and margin-right:auto but that didn't seem to work. I also can't necessarily change the position: because they need to those to make everything else work.
Any suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
font-family: 'Roboto Condensed', sans-serif;
}
#side-chat {
position: absolute;
right: 100%;
bottom:50%;
z-index:9999999999999 !important;
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
display:flex;
justify-content: center;
align-items: center;
color: #ffffff;
border-radius: 10px;
background: rgba(30, 175, 230, 0.5);
text-decoration: none;
padding: 15px;
font-size: 25px;
line-height: 20px;
text-align: center;
}
#olark-box-wrapper {
position: absolute;
z-index:99999999999999 !important;
top: 400px;
right: -300px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#olark-box-wrapper.chatbox-open {
right: 0
}
#olark-box-wrapper.chatbox-closed {
right: -300px;
}
#habla_window_div {
margin: 0 !important;
}
#side-chat img{
margin-right: 10px;
}
#side-chat:hover,
#side-chat:active {
background: #22a7e5;
}
</style>
</head>
<body>
<div id="olark-box-wrapper">
<!-- Olark chat tab -->
<a id="side-chat" href="javascript:void(0);" onclick="setTimeout(changeClass, 3);">
<img src="icon-chat.svg">
Chat
</a>
<!-- Empty Olark chat box container -->
<div id="olark-box-container"></div>
</div>
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
//olark.configure('system.hb_detached', true);
olark.configure('box.inline', true);
olark.identify('xxxx-xxx-xx-xxxx');</script>
<!-- end olark code -->
<script type='text/javascript'>
// Javacript function to toggle the class of the chat box wrapper
function changeClass()
{
// Get the HTML object containing the Olark chat box
var olark_wrapper = document.getElementById("olark-box-wrapper");
// If the chat box is already open, close id
if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
olark_wrapper.className = "chatbox-closed";
document.querySelector('#side-chat img').src = "icon-chat.svg";
}
// Otherwise add open the Olark chat box
else {
olark_wrapper.className = "chatbox-open";
document.querySelector('#side-chat img').src = "icon-cancel.svg";
}
}
</script>
</body>
</html>
You are placing your div relatively to the parent using absolute absolute positioning.
If the size of your wrapper is important, you should wrap it on another div, make it have the entire height of the page, position it on the right using and use a flex display as suggested by #ali-abbasov in your comment.
#wrapper-of-olark-box-wrapper {
position: fixed; // so that it stays positioned as you want regardless of the parent
top:0;
right:0;
height: 100%; // you can try 100vh if this one does not work
display: flex; // the solution
justify-content: right;
align-items: center;
}
Related
CSS:
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sidebar {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 20px 5px;
grid-template-areas: "1"
"box"
"3";
height: 100%;
width: 275px;
background: black;
}
#sidebar-box {
grid-area: box;
height: 20px;
width: auto;
margin: 0 12.5px 0 12.5px;
background-color: white;
}
#sidebar-open-button {
margin-top: 40%;
height: 50px;
width: 50px;
background-color: blue;
}
#sidebar-close-button {
height: 15px;
width: 15px;
background-color: red;
margin-left: 5px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="sidebar">
<div id="sidebar-box">
<button id="sidebar-close-button"></button>
</div>
</div>
</body>
</html>
What Im looking for is whenever you press the "sidebar-close-button" button the "sidebar" and its contents slowly (over 0.5s) move off screen to the left and while that is moving off screen the "sidebar-open-button" does the exact same thing but to the right (comes onto screen, sliding in from the left). Also when "sidebar-open-button" is sliding onto screen I want it to be on top of "sidebar" and its contents.
The end product of pressing "sidebar-close-button" should look like just having your html like this:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button id="sidebar-open-button"></button>
</body>
</html>
Any help is appreciated, even links to some documentation because I currently have no idea how to do this.
You can try this.
I wrapped everything into a div that includes your opener button and your visible sidebar with the closer button so everything about the sidebar are contained together.
Then I simply added click event listeners to your buttons to toggle the opened and closed classes on the sidebar-container.
Then I set the CSS so that when the .sidebar-container is .opened, it hides the #sidebar-open-button and shows the #sidebar-box, and when it is .closed, it shows the #sidebar-open-button and hides the #sidebar-box. The CSS transition provides the animation.
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
const container = document.getElementsByClassName('sidebar-container')[0];
container.querySelectorAll('#sidebar-open-button, #sidebar-close-button').forEach((elem) => {
elem.addEventListener('click', (event) => {
container.classList.toggle('opened');
container.classList.toggle('closed');
});
});
}
};
.sidebar-container {
height: 100vh;
width: 50vw;
position: relative;
}
#sidebar-open-button {
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
.opened #sidebar-open-button {
left: -100%
}
#sidebar {
background-color: cyan;
height: 100%;
transition: all 0.5s;
}
.closed #sidebar {
transform: translateX(-110%);
}
<div class="sidebar-container closed">
<button id="sidebar-open-button">Open</button>
<div id="sidebar">
<div id="sidebar-box">
<button id="sidebar-close-button">Close</button>
</div>
</div>
</div>
You may be looking for CSS animations.
As in this answer, you can add a class to an element apon a javascript event to trigger an animation.
This adapted code may help.
let sideBarRevealed = false;
button.on("click",function () {
if(!sidebarRevealed) {
//If not revealed then reveal
if(sideBar.hasClass("animateHide")){
sideBar.removeClass("animateHide")
}
sideBar.addClass("animateReveal");
sideBarRevealed = !sideBarRevealed;
}
else {
//If revealed then hide
sideBar.addEventListener('animationend', () => {
sideBar.removeClass("animateReveal");
});
sideBar.addClass("animateHide");
sideBarRevealed = !sideBarRevealed;
}
});
If you are planning to use this kind of components in your website, maybe using a frontend framework such as angular or react may be better suited since you won't have to design and script each component.
The transition of my header and navigation finish in the desired places and have the correct look I am going for, however, the transition is jumpy, almost as if something is trying to restrict the translation from happening. Any advice on how I can go about fixing this erratic transition behavior?
With a similar problem, the padding of the initial element style was the problem (before JavaScript changed the style class.)
I expect the transition to be smooth and seamless, not fighting to transition into it's proper end place.
Thanks again for any help.
PS: I'm not sure how to reference the JS file at the bottom of the HTML code to allow the JS code snippet to change the html elements properly. The CSS which is supposed to make the 'headerLogoBackground' sticky at the very top of the window and change is not being applied which is needed to answer the question. However, I don't have this problem on my local machine - sorry guys, working on fixing this in the stackoverflow code snippet editor:/
// JavaScript
window.onscroll = function() {
headerSlide_and_change();
}; // end window.onscroll
function headerSlide_and_change() {
if (document.body.scollTop > 30 || document.documentElement.scrollTop > 30) {
// vars
var headerLogoBackground = document.getElementById("headerLogoBackground");
var headerLogo = document.getElementById("headerLogo");
headerLogoBackground.classList.remove("headerLogoBackground"); // header background
headerLogoBackground.classList.add("headerLogoBackGroundTransform");
headerLogo.classList.add("headerMove"); //header title slide
} else {
/*---header background---*/
var headerLogoBackground = document.getElementById("headerLogoBackground");
headerLogoBackground.classList.remove("headerLogoBackGroundTransform");
headerLogoBackground.classList.add("headerLogoBackground");
/*---header---*/
var headerLogo = document.getElementById("headerLogo");
headerLogo.classList.remove("headerMove");
headerLogo.classList.add("headerLogo");
} // end else
} // end navChangeOnScrollUp
html,
body {
margin: 0;
height: 100vw;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #796651;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
// Initial CSS
// header
.headerLogoBackground {
background-color: none;
transition: background-color .2s linear;
}
.headerLogo {
text-align: center;
transition: all .2s;
}
.headerLogo a {
font-family: 'Squada One', cursive;
font-size: 40px;
text-decoration: none;
color: #d8cfc3;
}
.headerLogo a:focus {
outline: none;
color: darkslategrey;
}
// navigation bar
.navRaise {
position: -webkit-sticky;
position: static;
z-index: 2;
}
nav {
text-align: center;
font-weight: bold;
width: 100%;
margin-bottom: 8%;
}
.navUlStyle {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.26);
height: 45px;
line-height: 45px;
}
nav li {
float: left;
width: 8%;
padding-left: 12.5%;
padding-right: 12.5%;
}
nav a {
font-family: 'Squada One', cursive;
font-size: 20px;
text-decoration: none;
color: #d8cfc3;
display: block;
text-align: center;
position: relative;
z-index: 3;
}
// JavaScript CSS Classes used to change initial CSS
.headerLogoBackGroundTransform {
/* to replace 'headerLogoBackground' */
position: sticky;
top: 0;
background-color: white !important;
transition: all .2s linear;
z-index: 10;
}
.headerMove { /* to replace 'headerLogo' */
margin-block-start: 0;
transform: translate(-10%, 0px) !important;
transition: transform .2s;
display: inline-block;
width: 30%;
float: left;
}
<html>
<head>
<title>...</title>
<link href="https://fonts.googleapis.com/css?family=Pinyon+Script|Squada+One&display=swap" rel="stylesheet">
</head>
<body id="body">
<div id="Welcome"><!--Wrapper div-->
<!-------------------------Top Section------------------------->
<header id="headerLogoBackground" class="headerLogoBackground">
<!--header-->
<h1 id="headerLogo" class="headerLogo"><a id="headerLogoLink" href="index.html">Lorem Dolo</a></h1>
<!--navigation-->
<nav id="navRaise" class="navRaise">
<ul id="navUl" class="navUlStyle">
<li><a id="topNav" title="Top" href="#Welcome"> Top </a></li>
<li><a id="servicesNav" title="Services" href="#Services"> Services </a></li>
<li><a id="contactNav" title="Contact" href="#Contact"> Contact </a></li>
</ul>
</nav>
</header>
</div><!-- end wrapper div -->
<!------------------------JavaScript Documents--------------------------->
<!-- I don't think path to external JavaScript file is relevant for stackoverflow code snippet -->
</body>
</html>
I try to do this, put an image on an iframe, when I click on it, I see a gif image (upload) and at the end I show the iframe with JavaScript, I try to do it with this code but I can not get the image deleted, it just stays the gif image.
I would like to do something like this:
https://sv.danimados.com/gilberto.php?id=cHJsZ0MwWXFDb2h1eGJrcUI0WFlsWnYyN3puT1BzbWtqSDlrWlZ3R3BQNGI3V3RjOWNDZ3kwWStFVDVNQmx1Ng==&sv=UploadYour
<html>
<head>
<meta charset="UTF-8">
<meta name="googlebot" CONTENT="noindex" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.container {
height: 100%;
overflow: auto;
}
.section {
position: relative;
width: 100%;
}
.section p {
margin: 0;
}
/* sizes */
.fit {
height: 100%;
}
.wide {
height: auto;
padding-top: 56.25%;
/* 9 / 16 = 0.5625 */
}
.wide .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* centering */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cargando {
color: #fff;
font-family: Arial;
position: relative;
font-size: 20px;
z-index: 1;
font-weight: bold;
top: 35%;
cursor: pointer;
}
.cargando img {
width: 150px;
height: 150px;
}
.theplayer {
z-index: 10000;
}
.play-background:hover {
transition: all .6s;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.play-background {
cursor: pointer;
}
iframe {
position:absolute;top:0;left:0;width:100%;height:100%;display: none; }
</style>
</head>
<body class="play-background">
<div class="container">
<div class="section fit">
<div class="t">
<div class="tc">
<div class="cargando">
<img class="load" style="display: none;" src="https://i.imgur.com/Be2Lu9R.gif"><img class="go-boton" src="https://sv.danimados.com/images/play_button.png"><div class="server">Servidor: <b>NeoPen-O-SV</b></div></div>
<iframe src="https://sendvid.com/embed/0bmbrf7a" width="100%" height="100%" z-index="1000" style="border: none"></iframe>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$( ".play-background" ).click(function() {
$(".go-boton").hide();
$(".load").show();
$(".theplayer").show();
$(this).removeClass("play-background");
});
</script>
</html>
As I would do when I clicked, I saw the gif image of loading, disappear and show me the iframe.
A loading gif should appear when the iframe is not entirely loaded. If you have slow loading iframes a loading gif is a good thing to have, but having an iframe load with minimal or no latency is better.
Does your page have multiple iframes?
If so, you should reassess your layout. Iframes are the slowest elements to load and rendering multiple iframes will compound loading times.
If not, you should reassess the content of the iframe itself. If the content is a video, try another service to upload and play the video like YouTube or your own site, etc.
Can you edit the page in the iframe?
If so, then establish communication between the parent page (ie the page you are presently located on) and the child page (ie the page within the iframe). Go to this page for details on how to detect when a child page within an iframe is loaded.
If not, you'll need to consider alternatives as described in this post.
Once you have determined that the iframe is loaded, remove the loader gif and reveal the play button image.
Delegate the click event to the play button image and have the callback function remove the play button image and reveal the iframe.
$(play-button-image).on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, figcaption').fadeIn().addClass('active');
e.stopPropagation();
});
If a "double clicking" behavior occurs (ex user clicks the button once and callback function is called but quickly reacts to a second ghost click), add e.stopPropagation(); to the end of the callback function to prevent event bubbling from triggering any other event handlers registered on ancestor tags.
Add/remove a special class (ex .active) that represents the state of a tag (ex hide or show)
Apply a similar event handler that will remove the iframe and reveal the play button image. In the demo the user clicks the figcaption.caption (see the last code block in demo).
Note: In the demo a setTimeout() is called to simulate the iframe loading slowly. Also, due to SO sandbox rules certain features are blocked (figcaption.caption doesn't show, video isn't responsive, etc.). To run with full functionality copy and paste the source to a text file, save with the .html (alt .htm) extension to file name, and open in a browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
}
main {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 5vh auto;
width: 100%;
height: 100%;
overflow: hidden;
}
.hframe {
margin: 0 auto;
padding-top: 56.25%;
width: 100%;
height: auto;
position: relative;
}
iframe {
min-width: 100%;
min-height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.hframe img {
width: 150px;
height: 150px;
position: absolute;
z-index: 0;
top: calc(50% - 75px);
left: calc(50% - 75px);
cursor: pointer;
}
.load:hover {
cursor: not-allowed;
}
.caption {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
font: 100 small-caps 1.2rem/1.2rem Verdana;
color: cyan;
background: rgba(0, 0, 0, 0.2);
}
.go:hover,
.caption:hover {
transition: all .6s;
transform: scale(1.1);
cursor: pointer;
}
.active {
display: block !important;
z-index: 1000;
}
</style>
</head>
<body>
<main>
<figure class="hframe">
<img class="load active" src="https://i.imgur.com/Be2Lu9R.gif">
<img class="go" src="https://sv.danimados.com/images/play_button.png" style="display: none;">
<iframe src="" frameborder="0" allowfullscreen style="display: none;"></iframe>
<figcaption class='caption' style="display: none;"><a>Server: <b>NeoPen-O-SV</b></a></figcaption>
</figure>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load', loading);
function loading(e) {
setTimeout(function() {
$('.load').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
}, 2500);
}
$('.go').on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, .caption').fadeIn().addClass('active');
e.stopPropagation();
});
$('.caption').on('click', function(e) {
$('iframe, .caption').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
$('iframe')[0].src = '';
e.stopPropagation();
});
</script>
</body>
</html>
If I understand correctly, you want the element in front of the iframe to disappear, and then remove class command is not working in the script. Perhaps you are referencing the wrong object to remove the class from?
Instead of
$(this).removeClass("play-background")
Try
$("body").removeClass("play-background")
I have a div that is set to:
{
height: 100vh;
width: 100%;
background-color: black;
opacity: 0;
position: absolute;
z-index: 2;
}
This div is also at the top of the page.
I want to make it so that as I scroll down (and away from the div), it slowly fades in, and when I scroll back up it fades out.
How would I do this?
You may refer following code snippet. The point I am trying to make is in the script tag at the bottom just added the window scroll function which sets the opacity to your entire window of desired height in your css class ".top". So when you try to scroll in and out it will dynamically add an animation effect to your window.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">Fade Away</div>
</div>
</body>
</html>
<script>
$(window).scroll(function() {
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
document.body.addEventListener('wheel', (e) => {
let faceLayer = document.getElementById('your_id');
faceLayer.style.opacity = Math.abs(faceLayer.getBoundingClientRect().top / faceLayer.clientHeight).
})
Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>
The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !
The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.