js Tooltip with delayed mouseout without jQuery

js Tooltip with delayed mouseout without jQuery - javascript

I want to display a tooltip when hovering a div. It should also be displayed when the mouse is hovering the tooltip-div.
Adding an event listener does this job, but if both divs are not overlapping the mouseout calls when the mouse is between them and the tooltip disappears.
Now I want to add a delay for the mouseout which is cancelled when it gets a new mouseover, but I don't know how.
document.getElementById("hoverElem").addEventListener("mouseover", function() {
document.getElementById("displayElem").style.visibility = "visible";
});
document.getElementById("hoverElem").addEventListener("mouseout", function() {
document.getElementById("displayElem").style.visibility = "hidden";
});
#hoverElem {
position: fixed;
height: 100px;
weidth: 200px;
top: 0px;
left: 50%;
background-color: white;
}
#displayElem {
position: fixed;
height: 100px;
weidth: 20px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: hidden;
}
<div id="hoverElem">
A little Div
<div id="displayElem">
Tooltip to show
</div>
</div>

You can intiate a timer in the mouseleave and then clear it in mouseenter of
displayElem like
document.getElementById("hoverElem").addEventListener("mouseenter", function() {
document.getElementById("displayElem").style.visibility = "visible";
});
var hoverTimer;
document.getElementById("hoverElem").addEventListener("mouseleave", function() {
hoverTimer = setTimeout(function() {
document.getElementById("displayElem").style.visibility = "hidden";
}, 500);
});
document.getElementById("displayElem").addEventListener("mouseenter", function() {
clearTimeout(hoverTimer);
});
document.getElementById("displayElem").addEventListener("mouseleave", function() {
this.style.visibility = "hidden";
});
#hoverElem {
position: fixed;
height: 100px;
weidth: 200px;
top: 0px;
left: 50%;
background-color: white;
}
#displayElem {
position: fixed;
height: 100px;
weidth: 20px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: hidden;
}
<div id="hoverElem">
A little Div
<div id="displayElem">
Tooltip to show
</div>
</div>

have you considered using pure CSS instead?
div {
position: fixed;
height: 100px;
width: 200px;
top: 0px;
left: 50%;
background-color: black;
}
div:hover span,
span:hover{
opacity:1;
}
span {
display:block;
opacity:0;
color:orange;
-webkit-transition-delay: .5s;
transition-delay: .5s;
-webkit-transition:opacity 1s ;
transition:opacity 1s ;
position: fixed;
height: 100px;
width: 100px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: visible;
}
<div>
<span>lorem Ipsum</span>
</div>

Related

CSS Transition: Cover Image From Bottom To Top

Here is a codepen: https://codepen.io/jon424/pen/XWzGNLe
In this example, if you select the toggle button, the image will be covered by another div. The white square will gradually cover the image from the top of the image to the bottom.
I simply want to reverse this effect. I want the white square to cover the image, moving from the bottom of the image to the top.
I’ve tried using a negative value for max-height in the .covered class, but that wasn’t working. Any idea on how I can go about doing this?
document.querySelector('.child2').classList.add('covered');
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.child2').classList.toggle('covered');
});
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.child2 {
z-index: 1;
background: #ffffff;
transition: max-height 1s ease-in-out;
max-height:100%;
}
.covered {
max-height: 0px;
}
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>

Very simple: change the top: 0; attribute in .child1 to bottom: 0;

Here is another way to do it you can manipulate the top of the child2:
document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered');});
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.child2 {
position: absolute;
top: 100%;
z-index: 1;
background: #ffffff;
transition: top 1s ease-in-out;
max-height: 100%;
}
.covered {
top: 0px;
}
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>

By adding those lines on .child2 I am getting I think what you want:
bottom:0;
top:unset;
Here is the full working example:
document.querySelector(".child2").classList.add("covered");
document.querySelector("button").addEventListener("click", () => {
document.querySelector(".child2").classList.toggle("covered");
});
.parent {
position: relative;
width: 300px;
height: 300px;
margin: 10px;
overflow: hidden;
}
.child1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.child2 {
z-index: 1;
background: #ffffff;
transition: max-height 1s ease-in-out;
max-height: 100%;
bottom:0;
top:unset;
}
.covered {
max-height: 0px;
}
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>

Not sure but are you looking for this type of effect, I know CSS solution if this help you.
.parent {
position: relative;
}
.parent::before {
content: "";
position: absolute;
height: 0;
width: 100%;
background-color: white;
bottom: 100%;
left: 0;
transition: all 0.9s ease-in-out;
}
.parent:hover::before {
height: 100%;
bottom: 0;
-webkit-transition: height 0.9s ease;
transition: height 0.9s ease;
}
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
</div>
</div>

how to make an element stay in place when position changes from absolute to fixed

I have this button that on click reveals and expands a div element using a css transition, giving the illusion that the button itself expands. In order to have the div positioned on top of the button i set it to position: absolute but when open needs to be position: fixed. The problem i have with this is that when it switches between absolute to fixed it moves ruining the expantion effect. Here is the jsfiddle to my example.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
.button {
position: relative;
width: 100%;
height: 100%;
}
.button>button {
position: absolute;
left: 50vw;
top: 50vw;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
}
.button>button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50vw;
top: 50vw;
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible!important;
}
.bigger {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
body {
height: 1000px;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>

You can set an opacity or a transform: translate() on the .button parent container to make a fixed position child relative to the parent vs. the root of the document.
Doing this should give you the effect you're looking for.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
html,body {
width: 100%;
height: 100%;
}
.button {
position: relative;
/* opacity: 1; */
transform: translate(0, 0);
width: 100%;
height: 100%;
}
.button > button {
position: fixed;
left: 50%;
top: 50%;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
transform: translate(-50%, -50%);
}
.button > button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible !important;
}
.bigger {
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>

you can place fixed position to content after your animation is done
so your animation effect wont ruin . i have edited your fiddle see if this works as you like
edited fiddle
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
setTimeout(function(){
document.getElementById("content").classList.add('position');
},1000)
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(()=>{
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
setTimeout(function(){document.getElementById("close").classList.add('show');},1100);
}

anchors overlaying and not properly changing color, because not fully clickable

I'm trying to change the color every image on click but they are not properly selectable because of overlying each other with positioning and z-index...
code is working as you can check by clicking on top right corner it change color...tried different methods of CSS, not JavaScript... newbie in JavaScript.
body,div,p,h1,h2,h3,h4,h5,h6,span {
margin: 0;
}
div.nav {
height: 100px;
width: 100%;
padding: 20px 0;
background-color: #615d5d;
text-align: center;
}
.screens_wrap {
display: inline-block;
margin: 0 auto;
height: 100%;
position: relative;
}
.screen_inner {
position: relative;
height: 100%;
margin: 0 auto;
width: 150px;
}
.screen {
position: absolute;
width:100px;
height: 58px;
border: 3px solid #aeaeae;
}
/* transparent style -------------------------------------------------------------------*/
.nav .screen.screen1 {
bottom: 0;
left: 0;
z-index: 3;
background-color: #00ad63;
}
.nav a .screen.screen2 {
bottom: 15px;
left: 15px;
z-index: 2;
background-color: transparent;
}
.nav a .screen.screen2:hover{
background-color: #4f025a;
}
.nav .screen.screen3 {
bottom: 30px;
left: 30px;
z-index: 1;
background-color: transparent;
}
.nav .screen.screen3:hover{
background-color: #ffec36;
}
.nav .screen2:hover, .screen3:hover {
-webkit-animation-name: hover;
-webkit-animation-duration: 1s;
animation-name: hover;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
opacity: 1;
width: 100px;
}
.nav.nav6 {
height: 200px;
}
.screen_inner a.screenanchors:first-child img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.screen_inner a.screenanchors:nth-child(2) img{
position: absolute;
left: 20px;
top: 20px;
z-index: 2;
}
.screen_inner a.screenanchors:nth-child(3) img{
position: absolute;
left: 40px;
top: 40px;
z-index: 3;
}
.screenanchors img {
overflow: hidden;
}
#keyframes spinning {
from {
transform: translateZ(-5em) rotateY(0deg);
}
to {
transform: translateZ(-5em) rotateY(180deg);
}
}
#keyframes skewing {
from {
transform: translateZ(-5em) skew(-3deg, -25deg);
}
to {
transform: translateZ(-5em) skew(-3deg, 0deg);
width: 100%;
height: 100px;
z-index: 9999999;
bottom: 0;
}
}
/* Standard syntax */
#keyframes hover {
0% {
margin-bottom:+10px;
bottom: unset;
}
100% {
margin-bottom:+10px;
bottom: unset;
}
}
<div class="nav nav6" style="margin-top: 25px;">
<div class="screens_wrap">
<div class="screen_inner">
<img id="imgName" src="https://imageshack.com/i/plylrZh4p" onclick="changeSrc()" width="100px">
<img id="imgName1" src="https://imageshack.com/i/pljaZE0Gp" onclick="changeSrc1()" width="100px">
<img id="imgName2" src="https://imageshack.com/i/plm9slyTp" onclick="changeSrc2()" width="100px">
</div>
</div>
</div>
<script>
function changeSrc(){
document.getElementById("imgName").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName1").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName2").src="https://imageshack.com/i/pljaZE0Gp";
}
function changeSrc1(){
document.getElementById("imgName").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName1").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName2").src="https://imageshack.com/i/plylrZh4p";
}
function changeSrc2(){
document.getElementById("imgName").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName1").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName2").src="https://imageshack.com/i/plm9slyTp";
}
</script>
it should work by clicking every where on single image, no overlay effecting clickable space...

Just to Help out others, I fixed the issue using area mapping...

Div's contents showing with opacity set to 0

I am attempting to get a panel to slide up when a trigger is selected. This is working in my snippet. The issue is that the contents within the #proposal-panel are showing, even though I have #proposal-panel set to opacity: 0, until the trigger is clicked (.active is added). It is showing at the bottom of the page.
Also, for some reason on my actual site, the panel is not sliding up. I have multiple sections, just like the example. The panel just sets at the bottom of the page. The only thing that happens when the active class is added is the z-index takes effect.
I am wanting the panel to slide from the bottom to the top when triggered. That is what I am trying to do with translateYin the active class.
Does anyone know why the contents are showing and possibly why the panel is not sliding up?
Here is a fiddle.
$('#proposal-trigger').on('click', function () {
$('#proposal-panel').addClass('active');
});
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
background: #3B3B3B;
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
height: 100vh;
position: fixed;
padding: 15px 0;
right: 0;
bottom: -100vh;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
transform: translateY(0vh);-webkit-transform: translateY(0vh);
bottom: 0;
top: 0;
z-index: 99;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>

Assuming it's the little black box you see at the bottom, that's from #proposal-trigger. #proposal-panel is hidden. I removed the background color from #proposal-trigger to get rid of that.
And to have the element slide up, use transform: translate().
$('#proposal-trigger').on('click', function() {
$('#proposal-panel').addClass('active');
});
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
height: 100vh;
position: fixed;
padding: 15px 0;
right: 0;
opacity: 0;
transition: 0.3s;
transform: translateY(100%);
bottom: 0;
}
#proposal-panel.active {
transform: translateY(0);
z-index: 99;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>

You don't need to use translateY to do this animations, just need to use top and bottom with the fixed position. And remove the background-color from #proposal-trigger so it doesn't show anymore
Here is a demo
$('#proposal-trigger').on('click', function () {
$('#proposal-panel').addClass('active');
});
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
position: fixed;
padding: 15px 0;
right: 0;
bottom: 0;
top: 100%;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
bottom: 0;
top: 0;
z-index: 99;
opacity: 1;
}

Get out of function, and make the function work again

I have some images, and I want them to scale and change position when clicked (this part is working).
Then I want them to scale down and move back to their original position when clicked again (works), if I click the "close" button (partly works – "close" button is not fading on first click), or if I click anywhere on the screen (don't know how).
The main problem is that when the clicked image is back in its original position, none of the images are clickable, so I can't make the function work more than once.
Any help would be appreciated!
jQuery:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});
CSS:
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
Html:
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="items/image1.png">
<img class="bar" src="items/image2.png">
<img class="foobar" src="items/image3.png">
<img class="barfoo" src="items/image4.png">
</section>

You can do something like
$(document).ready(function() {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
itemImages.click(function() {
if ($(this).hasClass('blur')) {
return;
}
if ($(this).hasClass('scaled')) {
reset();
return;
}
$(this).addClass("scaled");
itemImages.not(this).addClass("blur");
$(this).removeClass("blur");
$('.close').fadeIn('slow');
});
$('.close').click(reset);
function reset() {
itemImages.removeClass("scaled blur");
$('.close').fadeOut('fast');
}
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height: 86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>

you are supposed to re-bind the click event, not to use on:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
var setClick = function(){
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
}
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
setClick();
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});

The problem is, that $().on(); does not work like this: $(itemImages).on('click');. I guess, you try to reverse the $(itemImages).off('click'); statement. You need to pass the event handler that shall get attached to the on function or use the click function again. So the easiest way is to define the event handler in a separate function and attach it again:
$(document).ready(function () {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(itemImages_click);
$('.close').click(function () {
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).click(itemImages_click);
}
function itemImages_click(e) {
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click', itemClicked);
};
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>

We Keep Coding

JavaScript is the programming language of the Web.

js Tooltip with delayed mouseout without jQuery - javascript

Related

CSS Transition: Cover Image From Bottom To Top

how to make an element stay in place when position changes from absolute to fixed

anchors overlaying and not properly changing color, because not fully clickable

Div's contents showing with opacity set to 0

Get out of function, and make the function work again

Categories

Resources