How to add random position of image in css by the x

How to add random position of image in css by the x - javascript

I need to make a random position of image ".block" and make the auto reset of function when it flies down. Big thanks to everybody who will help. :)
var player = document.getElementById("player");
var block = document.getElementById("block");
function goleft(argument) {
player.classList.add("animatel");
setTimeout(function() {
player.classList.remove("animatel");
}, 1);
console.log("left");
}
function goright(argument) {
player.classList.add("animater");
console.log("right");
}
body {
background-color: lightblue;
}
.player {
height: 50px;
width: 50px;
position: relative;
top: 450px;
}
.block {
height: 30px;
width: 30px;
position: relative;
top: -50px;
animation: block 1s infinite linear;
}
#game {
width: 500px;
height: 500px;
border: 2px solid black;
}
#keyframes block {
0% {
top: -50;
}
100% {
top: 420;
}
}
#keyframes gor {
0% {
left: 0px;
}
50% {
left: 450px;
}
100% {
left: 0px;
}
}
#keyframes gol {
0% {
right: 450px;
}
50% {
right: 0px;
}
100% {
right: 450px;
}
}
.animater {
animation: gor 1s;
position: relative;
}
.animatel {
animation: gol 1s;
position: relative;
}
<body>
<div id="game">
<div id="player"><img class="player" src="https://via.placeholder.com/50" alt="player box"></div>
<div id="block"><img class="block" src="https://via.placeholder.com/80" alt="bogdan"></div>
<button onclick="goleft()">left</button>
<button onclick="goright()">right</button>
<script type="text/javascript" src="script.js"></script>
</div>
</body>

Related

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...

How to use removeClass according to multiple conditions?

Can someone help me out with this animation? I have been trying to replicate this one. I got so close to completing it but just can't find a way to make the animation endless on every click. Huge, Thanks in advance!
Problem: After two clicks my animation transitioning of div elements away from the window does not seem to be working.
Expected Result: One every click the Background should transitioning into the window just like the reference from Instagram that I have linked you with.
Reference
Here is the Demo Link
<div class="bg">
<div id="blue" class="skew"></div>
<div id="red" class="skew"></div>
<div id="blue_2" class="skew"></div>
</div>
<button>Toggle</button>
$skew: skew(-10deg);
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bg {
position: relative;
background: red;
width: inherit;
height: inherit;
overflow: hidden;
}
.skew {
position: relative;
width: 100%;
height: inherit;
transform: translateX(-110%);
animation-fill-mode: forwards;
&.blue_wrapper {
background: blue;
animation: slideRight 1s forwards;
}
&.red_wrapper {
background: red;
animation: slideRight 1s forwards;
}
&::before,
&::after {
content: "";
position: absolute;
top: 0;
width: 250px;
height: inherit;
background: inherit;
transform: $skew;
}
&::before {
left: -5%;
}
&::after {
right: -5%;
}
}
#red,
#blue_2 {
position: absolute;
top: 0;
left: 0;
}
blue_2.blue_wrapper_2 {
background: blue;
animation: slideRight 1s forwards;
}
button {
position: fixed;
right: 30px;
bottom: 30px;
}
#keyframes slideRight {
from {
transform: translateX(-110%);
}
to {
transform: translateX(0);
}
}
$(document).ready(function() {
$("button").on("click", function() {
if (
$("#blue").hasClass("blue_wrapper")
) {
$("#red").addClass("red_wrapper");
} else if (
$("#blue").hasClass("skew blue_wrapper") &&
$("#red").hasClass("skew red_wrapper")
) {
$("skew red_wrapper").removeClass("red_wrapper");
$("skew blue_wrapper").removeClass("blue_wrapper");
$("blue_2").addClass("blue_wrapper_2");
} else if {
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
} else {
$("#blue").addClass("blue_wrapper");
}
});
});

You logic makes no sense for
else if (
$("#blue").hasClass("") +
$("#red").hasClass("") +
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
In the above you are checking if the classes have no class then removing the class that is lnt there.
Also you are using + when I assume you meant && or ||

Your Demo link isn't working because you aren't removing the blue Wrapper or red wrapper, this will get the demo to work:
$(document).ready(function() {
$("button").on("click", function() {
if ($("#blue").hasClass("blue_wrapper")) {
$("#red").addClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
} else {
$("#blue").addClass("blue_wrapper");
$("#red").removeClass("red_wrapper");
}
});
});
For your regular code, you should replace + with && or || as needed, and remove wrappers that you add.

Some syntax issues, some selector issues. Compiled the CSS to test. Removed one odd CSS thing that would not compile. Note I modified to use lime to start to better illustrate.
$(function() {
$("button.toggle").on("click", function() {
if (
$("#blue").hasClass("blue_wrapper") && !$("#red").hasClass("red_wrapper")
) {
$("#red").addClass("red_wrapper");
} else if (
$("#blue").hasClass("blue_wrapper") &&
$("#red").hasClass("red_wrapper")
) {
$(".red_wrapper").removeClass("red_wrapper");
$(".blue_wrapper").removeClass("blue_wrapper");
$("#blue_2").addClass("blue_wrapper_2");
} else if (
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
$("#blue_2").removeClass("blue_wrapper_2")
} else {
$("#blue").addClass("blue_wrapper");
}
});
});
.skew {
transform: skew(-10deg);
}
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bg {
position: relative;
background: lime;
width: inherit;
height: inherit;
overflow: hidden;
}
.skew {
position: relative;
width: 100%;
height: inherit;
transform: translateX(-110%);
animation-fill-mode: forwards;
}
.skew.blue_wrapper {
background: blue;
animation: slideRight 1s forwards;
}
.skew.red_wrapper {
background: red;
animation: slideRight 1s forwards;
}
.skew::before,
.skew::after {
content: "";
position: absolute;
top: 0;
width: 250px;
height: inherit;
background: inherit;
transform: $skew;
}
.skew::before {
left: -5%;
}
.skew::after {
right: -5%;
}
#red,
#blue_2 {
position: absolute;
top: 0;
left: 0;
}
#blue_2.blue_wrapper_2 {
background: blue;
animation: slideRight 1s forwards;
}
button {
position: fixed;
right: 30px;
bottom: 30px;
}
#keyframes slideRight {
from {
transform: translateX(-110%);
}
to {
transform: translateX(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
<div id="blue" class="skew">blue</div>
<div id="red" class="skew">red</div>
<div id="blue_2" class="skew">blue_2</div>
</div>
<button class="toggle">Toggle</button>

Use JQuery .animate to move an element up and down infinitly

Right now, I have the following JQuery .animate command which moves a line image from top:0px to top:200px.
$("#scanner").animate({ top: '200px' }, 2000);
How can I animate the line image from 200px back to 0px and so on, to 200px , repetativly, infinitly?
(To clarify, the animation is like a barcode scanner).

Set it as success callback
function topInc(){
$("#scanner").animate({ top: '200px' }, 2000, topDec);
}
function topDec(){
$("#scanner").animate({ top: '0' }, 2000, topInc);
}
topInc();

In case someone needs it, the CSS solution would be:
.scan-box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#scanner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: none rgba(255, 0, 0, .5);
animation: scanning 3s linear infinite;
}
#keyframes scanning {
0% {
top: 0;
}
50% {
top: calc(100% - 10px);
}
100% {
top: 0;
}
}
<div class="scan-box">
Scanning...
<div id="scanner"></div>
</div>
As a bonus, some customization can be done via additional styles or using CSS Variables:
:root {
--data-from: 0;
--data-to: 100%;
}
.scan-box {
position: relative;
width: 150px;
height: 150px;
border: 1px solid black;
float: left;
margin: 0 10px 10px 0;
}
.scanner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background: none rgba(255, 0, 0, .5);
animation: scanning 3s linear infinite;
}
.scanner-ease-in-out {
animation: scanning 3s ease-in-out infinite;
}
#keyframes scanning {
0% {
top: var(--data-from);
}
50% {
top: calc(var(--data-to) - 10px);
}
100% {
top: var(--data-from);
}
}
<div class="scan-box">
Scanning...
<div class="scanner"></div>
</div>
<div class="scan-box">
Scanning...
<div class="scanner scanner-ease-in-out"></div>
</div>
<div class="scan-box">
Scanning...
<div class="scanner" style="--data-from:25%;--data-to:75%"></div>
</div>
Also on JSFiddle.

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.

How to add random position of image in css by the x - javascript

Related

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

How to use removeClass according to multiple conditions?

Use JQuery .animate to move an element up and down infinitly

Get out of function, and make the function work again

Categories

Resources