We Keep Coding

css make element slanted and hoverable

I have this product card, which i am using for a model type card:
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 200px;
left: 0;
top: 100%;
background-color: #fff;
transform: skewY(0deg);
transform-origin: 0 0;
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>
I need it to be like this:
https://res.cloudinary.com/piersolutions/video/upload/v1626393248/Screen_Recording_2021-07-15_at_7.47.07_PM_nlksby.mov
however, I cannot figure out 1) how to get the item slanted, and 2) to only do it on hover. I have been trying for days and cannot find anything on how to do this!! I tried using the hover css tag, but it didn't work, because i don't know how to mkae it appear and disapear on hover, and slanted is even worse :( Any ideas?

Here is the working example, you just need to move a skewed element on hovering .rooted-increment.
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 100px;
left: 0;
top: 100%;
background-color: #ffffff54;
transform: skewY(25deg);
transform-origin: 0 0;
transition: all 0.3s ease-in;
}
.rooted-increment:hover .cover:after {
transform: skewY(25deg) translateY(-100px);
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>

You can do like this also.
#import 'https://fonts.googleapis.com/css?family=Do+Hyeon';
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clear-fix:after {
display: block;
clear: both;
content: "";
}
.img-responsive {
max-width: 100%;
height: auto;
}
.card__collection {
position: relative;
display: block;
background: rgba(10, 10, 10, 0.5);
padding: 10px;
font-family: "Do Hyeon", sans-serif;
overflow: hidden;
}
.card__collection .cards {
width: 300px;
height: 400px;
display: block;
background-size: cover;
float: left;
border-radius: 15px;
position: relative;
overflow: hidden;
background-position: center;
margin: 10px;
}
.card__collection .cards--one {
backface-visiblility: hidden;
}
.card__collection .cards--one:hover:after {
bottom: -20px;
}
.card__collection .cards--one:hover:before {
bottom: -10px;
}
.card__collection .cards--one:hover .cards--one__rect {
left: 45%;
}
.card__collection .cards--one:hover .cards--one__rect--back {
left: 50%;
}
.card__collection .cards--one::after {
content: "";
display: block;
position: absolute;
height: 70px;
transform: rotate(-3deg);
background: #e660e3;
position: absolute;
bottom: -80px;
left: 0;
right: -10px;
z-index: 9;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one:before {
content: "";
display: block;
position: absolute;
height: 80px;
transform: rotate(-3deg);
bottom: -90px;
left: 0;
background: #fff;
right: -10px;
z-index: 5;
transition: all 0.2s ease-in;
transition-delay: 0.1s;
}
.card__collection .cards--one__rect {
color: #fff;
text-transform: uppercase;
font-size: 18px;
background: #0f9bc0;
width: 126px;
height: 55px;
transform: skewY(5deg);
position: absolute;
display: block;
top: 60%;
left: -45%;
z-index: 1;
line-height: 3.3rem;
text-align: center;
transition: all 0.2s ease-in;
}
.card__collection .cards--one__rect--back {
display: block;
background: rgba(34, 65, 154, 0.8);
width: 126px;
height: 55px;
transform: skewY(7deg);
position: absolute;
top: 65%;
left: -50%;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one__rect p {
transform: skewY(-7deg);
position: relative;
}
.card__collection .cards--two {
position: relative;
backface-visibility: hidden;
}
.card__collection .cards--two p {
position: absolute;
top: 83%;
left: -100%;
text-transform: capitalize;
color: #fff;
font-size: 20px;
z-index: 8;
transition: all 0.6s ease;
}
.card__collection .cards--two:hover p {
left: 8%;
}
.card__collection .cards--two:hover img {
transform: translateY(-15px);
}
.card__collection .cards--two:hover .cards--two__rect {
top: 75%;
}
.card__collection .cards--two:hover .cards--two__rect:before {
transform: translateY(15px);
}
.card__collection .cards--two:hover li {
transform: translateY(0);
}
.card__collection .cards--two:hover .cards--two__tri {
right: -40%;
}
.card__collection .cards--two:hover .cards--two__tri:before {
right: -312px;
}
.card__collection .cards--two img {
transition: all 0.2s ease;
}
.card__collection .cards--two__tri {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #fff;
opacity: 0.9;
position: absolute;
display: block;
top: 0;
right: -100%;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__tri:before {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #57ccfd;
position: absolute;
content: "";
display: block;
top: -220px;
right: -612px;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.card__collection .cards--two__rect {
width: 750px;
height: 200px;
background: #fff;
display: block;
position: absolute;
top: 175%;
left: -78%;
transform: rotate(30deg);
z-index: 5;
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__rect:before {
content: "";
display: block;
width: 100%;
position: relative;
height: 100%;
background: #f07306;
transform: translateY(200px);
z-index: 2;
transition: all 0.3s ease-in-out;
transition-delay: 0.1s;
}
.card__collection .cards--two ul {
list-style: none;
position: absolute;
bottom: 0;
left: 10px;
z-index: 9;
}
.card__collection .cards--two ul li {
display: inline-block;
font-size: 16px;
margin: 7px;
color: #fff;
transition: all 0.2s ease-in-out;
transform: translateY(100px);
}
.card__collection .cards--two ul li:nth-child(2) {
transition-delay: 0.2s;
}
.card__collection .cards--two ul li:nth-child(3) {
transition-delay: 0.3s;
}
.card__collection .cards--two ul li:nth-child(4) {
transition-delay: 0.4s;
}
.card__collection .cards--three {
position: relative;
z-index: 10;
}
.card__collection .cards--three:hover .cards--three__rect-1 {
left: 10%;
}
.card__collection .cards--three:hover .cards--three__rect-1 .shadow-1 {
left: -20%;
}
.card__collection .cards--three:hover .cards--three__rect-2 {
left: 60%;
}
.card__collection .cards--three:hover .cards--three__rect-2:before {
left: -100%;
}
.card__collection .cards--three:hover .cards--three__rect-2:after {
left: 80%;
}
.card__collection .cards--three:hover .cards--three__rect-2 .shadow-2 {
left: -10%;
}
.card__collection .cards--three:hover .cards--three__circle {
transform: scale(1);
}
.card__collection .cards--three:hover .cards--three__circle:before {
transform: scale(0.9);
}
.card__collection .cards--three:hover .cards--three__list li {
transform: translateX(0);
}
.card__collection .cards--three__rect-1 {
background: #fff;
width: 200px;
height: 110px;
transform: skewX(-20deg);
display: block;
position: absolute;
top: 73%;
opacity: 0.9;
left: -100%;
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-1 p {
font-size: 20px;
color: #fff;
transform: skewX(20deg);
line-height: 6rem;
}
.card__collection .cards--three__rect-1 .shadow-1 {
background: #9b1308;
width: 230px;
height: 100px;
display: block;
position: absolute;
left: -200%;
z-index: -1;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2 {
width: 100px;
height: 70px;
background: #fff;
position: absolute;
top: 65%;
left: 1000%;
opacity: 0.9;
transform: skewX(-20deg);
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-2::before {
content: "";
display: block;
width: 50px;
height: 40px;
background: #57ccfd;
opacity: 1;
position: absolute;
left: 500%;
top: 10%;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2::after {
content: "";
display: block;
width: 50px;
height: 40px;
background: #9b1308;
opacity: 1;
position: absolute;
left: 500%;
top: 114%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__rect-2 .shadow-2 {
background: #57ccfd;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: -10%;
left: 500%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__circle {
width: 220px;
height: 220px;
border-radius: 50%;
background: #fff;
position: absolute;
top: -15%;
left: 50%;
opacity: 0.9;
transform: scale(0);
transition: all 0.3s ease;
}
.card__collection .cards--three__circle:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #9b1308;
border-radius: 50%;
transform: scale(0);
transition: all 0.3s ease;
transition-delay: 0.2s;
}
.card__collection .cards--three__list {
list-style: none;
position: absolute;
top: -9px;
right: 7px;
padding-top: 60px;
transition: all 0.4s ease;
}
.card__collection .cards--three__list li {
display: inline-block;
margin: 4px;
color: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(87, 204, 253, 0.9);
text-align: center;
line-height: 1.7rem;
font-size: 12px;
transition: all 0.3s ease;
transform: translateX(500%);
}
.card__collection .cards--three__list li:nth-child(1) {
transition-delay: 0.2s;
}
.card__collection .cards--three__list li:nth-child(2) {
transition-delay: 0.3s;
}
.card__collection .cards--three__list li:nth-child(3) {
transition-delay: 0.4s;
}
<div class="card__collection clear-fix">
<div class="cards cards--two">
<img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80" class="img-responsive" alt="Cards Image">
<span class="cards--two__rect"></span>
<span class="cards--two__tri"></span>
<p>Lucy Grace</p>
<ul class="cards__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="cards cards--three">
<img src="https://images.unsplash.com/photo-1480408144303-d874c5e12201?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=575213599ae24b3dbdfd84be79425c50&auto=format&fit=crop&w=634&q=80" class="img-responsive" alt="">
<span class="cards--three__rect-1">
<span class="shadow-1"></span>
<p>Chris Levnon</p>
</span>
<span class="cards--three__rect-2">
<span class="shadow-2"></span>
</span>
<span class="cards--three__circle"></span>
<ul class="cards--three__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>

I've added a Lightbox jquery for my website, but I want to remove a blue border that appears everytime

I've added a LightBox correctly, but there's something wrong when I click a photo, because there's like a blue border in Google chrome and then another type of border in Internet Explorer that I don't want to see:
https://imgur.com/9dQngUM
How can I remove this?
I've used this lightbox https://lokeshdhakar.com/projects/lightbox2/
Thank you! :D
.lb-loader, .lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}
.lb-container > .nav {
left: 0
}
.lb-nav a {
outline: 0;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next, .lb-prev {
height: 100%;
cursor: pointer;
display: block
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-prev:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-next:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
.lb-data .lb-caption a {
color: #4ae
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: alpha(Opacity=100);
opacity: 1
}

Without seeing "the full picture" i.e. your code; you could try this:
.lightbox * { border: none !important; }
This assumes it really is a border problem and not some background image or something of that nature.

How to add the full page parallax scroll on a one-page website

I would like to add the full page parallax scroll effect on a one-page website, but I have no idea how to add this effect.
I have tried to set up the section height: 100vh, but the result goes out that the last section covers the above sections.
Do you have any suggestions? Any help is appreciated. Thank you so much.
HTML:
<html lang="en">
<body>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times. </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<section id="section3" class="background">
<h2 >12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li><img src="img/12-constellation-cards/1.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/4.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/7.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/10.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/2.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/5.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/8.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/11.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/3.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/6.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/9.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/12.svg" alt="" class="svg"></li>
</ul>
</div>
</section>
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>
</body>
</html>
JavaScript:
$(document).ready(function () {
let hamburgerClicked = false;
$("#toggle").on("click", function () {
if (hamburgerClicked == false) {
$(".top").css(
"transform",
"translateY(11px) translateX(0) rotate(45deg)"
);
$(".middle").css("display", "none");
$(".bottom").css(
"transform",
"translateY(-11px) translateX(0) rotate(-45deg)"
);
hamburgerClicked = true;
} else {
$(".top").css("transform", "translateY(0px) translateX(0) rotate(0deg)");
$(".middle").css("display", "");
$(".bottom").css(
"transform",
"translateY(0px) translateX(0) rotate(0deg)"
);
hamburgerClicked = false;
}
$("#overlay").toggleClass("active");
$("#overlay").toggleClass("open");
});
});
CSS:
* {
box-sizing: border-box;
list-style: none;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
section {
height: 100vh;
transform: translateY(40vh);
will-change: transform;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
text-decoration: none;
scroll-behavior: smooth;
}
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
-moz-animation: move-twink-back 16s infinite;
-o-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: 0.7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: 0.6;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, height 0.35s;
}
li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
animation-delay: 0.4s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.5s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: 0.35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 25%;
position: absolute;
top: -46px;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
-moz-animation: rotation 8s infinite linear;
-o-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
-moz-filter: drop-shadow(5px 5px 5px #222);
-o-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
#section3-content {
padding-right: 100px;
padding-left: 100px;
margin-top: -90px;
overflow: hidden;
transition-timing-function: ease;
transition: .3s;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.8);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: -80px;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: -80px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 30px;
padding-bottom: 10px;
padding-right: 100px;
color: floralwhite;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: .9em;
margin-bottom: 15px;
font-weight: 200;
}
.constellation-icon {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.constellation-icon li {
display: table-cell;
vertical-align: middle;
padding: 1px;
padding-top: 15px;
}
.constellation-button {
width: 50%;
}
.constellation-button:hover {
background: rgb(0, 0, 205, 0.7);
filter: brightness(3);
border-radius: 80px;
border: 2px solid rgb(0, 0, 205, 0.7);
}
.constellation-button:active {
background: rgb(0, 0, 205);
filter: grayscale(.2);
transition-timing-function: linear;
}
.constellation-star-aq {
width: 46%;
opacity: 1;
float: left;
left: 1%;
margin-top: -10px;
position: absolute;
}
.constellation-star-ca {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 30px;
margin-left: 40px;
position: absolute;
transform: rotate(16deg);
}
.constellation-img-ca {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-ge {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 90px;
margin-left: 60px;
position: absolute;
transform: rotate(-3deg);
}
.constellation-img-leo {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-leo {
width: 40%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
margin-left: 70px;
position: absolute;
transform: rotate(5deg);
}
.constellation-img-sc {
opacity: .35;
width: 50%;
float: left;
top: -20px;
position: relative;
}
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
Here is a rough working demo on JSFiddle: https://jsfiddle.net/ha3c04yL/4/

Produce elements with different data

I'm trying to write a code which will allow me to show 8 pins on the map with different data (location, images, alt text, etc.), but when I run the code I get 8 pins with the exact same data. What am I doing wrong? As far as I am concerned, the getRandomInt function should produce various data, and since it's then used in the for loop, the data should be different each time. But I suppose I don't understand something correctly so if you can, please help me.
Thanks in advance!
'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var similarAds = {
'author': {
'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
},
'offer': {
'type': TYPES[getRandomInt(0, TYPES.length - 1)],
},
'location': {
'x': getRandomInt(0, mapOverlay.offsetWidth),
'y': getRandomInt(130, 630),
}
};
var renderPin = function (pinData) {
var element = document.createElement('button');
var newImage = document.createElement('img');
element.className = 'map__pin';
element.style.top = pinData.location.y + 'px';
element.style.left = pinData.location.x + 'px';
newImage.src = pinData.author.avatar;
newImage.alt = pinData.offer.type;
element.appendChild(newImage);
return element;
};
var renderPins = function () {
var fragment = document.createDocumentFragment();
for (var i = 0; i < ADS_COUNT; i++) {
fragment.appendChild(renderPin(similarAds));
}
pins.appendChild(fragment);
};
map.classList.remove('map--faded');
renderPins();
/* Общие стили. Каркас
========================================================================== */
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
url("../fonts/Roboto-Bold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-box-component {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.hidden {
display: none;
}
body {
max-width: 1200px;
margin: 0 auto;
color: #353535;
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
background-color: #f0f0ea;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* Карта с объявлениями
========================================================================== */
.promo {
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
width: 211px;
height: 45px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.map {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
height: 750px;
background-color: #82bcc0;
background-image: url("../img/map.jpg");
background-repeat: no-repeat;
background-position: center bottom;
border-radius: 0 0 10px 10px;
}
.map__pins {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.map__overlay {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.map__title {
width: 100%;
margin: 0;
padding: 0;
margin-top: 170px;
font-size: 85px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.map--faded .map__overlay {
opacity: 1;
}
/**
* Метка объявления
*/
.map__pin {
position: absolute;
z-index: 1;
width: 50px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.map__pin:focus {
outline: none;
-webkit-filter: drop-shadow(0 0 5px red);
filter: drop-shadow(0 0 5px red);
}
.map__pin img {
position: absolute;
z-index: 1;
top: 5px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.map__pin:not(.map__pin--main)::after {
content: "";
position: absolute;
width: 50px;
height: 70px;
top: 0;
left: 0;
background-image: url("../img/pins.svg");
background-repeat: no-repeat;
background-position: 0 -9px;
}
.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
background-position: 0 -88px;
}
.map__pin:active img,
.map__pin--active img {
-webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}
.map__pin--main {
width: 65px;
height: 65px;
cursor: move;
}
.map__pin--main img {
position: relative;
z-index: 1;
padding: 2px 6px 6px;
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
border: solid 5px #ff5635;
border-radius: 50%;
background-color: #ffffff;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.map__pin--main:active img,
.map__pin--main--active img {
background-color: #ffffff;
}
.map__pin--main svg {
position: absolute;
z-index: 0;
top: -50px;
left: -47px;
width: 156px;
height: 156px;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: rotate(120deg) scale(0);
-ms-transform: rotate(120deg) scale(0);
transform: rotate(120deg) scale(0);
-webkit-transform-origin: 78px 78px;
-ms-transform-origin: 78px 78px;
transform-origin: 78px 78px;
}
.map__pin--main:hover ellipse {
fill: rgba(255, 86, 53, 0.9);
}
.map__pin--main::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid 5px transparent;
border-top: solid 18px #fff;
border-bottom: 0;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: translate(-50%, -6px);
-ms-transform: translate(-50%, -6px);
transform: translate(-50%, -6px);
border-top-width: 22px;
border-top-color: #ff5635;
}
.map--faded .map__pin--main svg {
-webkit-transform: rotate(-20deg) scale(1);
-ms-transform: rotate(-20deg) scale(1);
transform: rotate(-20deg) scale(1);
}
.map--faded .map__pin--main::after {
-webkit-transform: translate(-50%, -30px);
-ms-transform: translate(-50%, -30px);
transform: translate(-50%, -30px);
}
.map__pin--main text {
font-size: 7px;
font-weight: 700;
fill: #ffffff;
}
/**
* Фильтры объявления
*/
.map__filters-container {
width: 100%;
background-color: rgba(3, 28, 45, 0.5);
}
.map__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 960px;
height: 46px;
margin: 0 auto;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 1;
}
.map--faded .map__filters {
opacity: 0;
}
.map__filter {
height: 30px;
margin-right: 10px;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.map__filter:hover {
border: 1px solid #ffaa99;
}
.map__filter:focus {
outline: none;
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
background-color: #f8f8f8;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
border-radius: 3px;
}
.map__feature--wifi {
background-position: 2px 5px;
}
.map__checkbox:checked + .map__feature--wifi {
background-position: 2px -172px;
}
.map__feature--dishwasher {
background-position: 2px -25px;
}
.map__checkbox:checked + .map__feature--dishwasher {
background-position: 2px -202px;
}
.map__feature--parking {
background-position: 3px -55px;
}
.map__checkbox:checked + .map__feature--parking {
background-position: 2px -232px;
}
.map__feature--washer {
background-position: 2px -85px;
}
.map__checkbox:checked + .map__feature--washer {
background-position: 2px -262px;
}
.map__feature--elevator {
background-position: 2px -143px;
}
.map__checkbox:checked + .map__feature--elevator {
background-position: 2px -321px;
}
.map__feature--conditioner {
background-position: 3px -114px;
}
.map__checkbox:checked + .map__feature--conditioner {
background-position: 2px -291px;
}
.map__feature:hover {
-webkit-box-shadow: inset 0 0 0 1px #ffaa99;
box-shadow: inset 0 0 0 1px #ffaa99;
}
.map__feature:focus,
.map__checkbox:focus + .map__feature {
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature:active {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #ff6547;
}
.map__checkbox:checked + .map__feature {
background-color: #ff6547;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
/**
* Карточка объявления
*/
.map__card {
position: absolute;
z-index: 2;
top: 150px;
left: 20px;
padding: 10px 10px 20px;
width: 230px;
font-size: 12px;
border-radius: 5px;
background-color: #ffffff;
}
.popup__avatar {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 10px;
}
.popup__close {
position: absolute;
bottom: 100%;
right: 0;
padding: 0;
font-size: 0;
border: 0;
background: none;
}
.popup__close:active {
-webkit-transform: translate(1px, 1px);
-ms-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
.popup__close:focus {
outline: none;
-webkit-box-shadow: 0 0 10px 3px #ff6547;
box-shadow: 0 0 10px 3px #ff6547;
}
.popup__close::after {
font-size: 50px;
line-height: 40px;
display: block;
content: "×";
color: #000000;
}
.popup__title {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 18px;
}
.popup__text {
margin: 0;
margin-bottom: 10px;
}
.popup__text--price {
font-size: 22px;
font-weight: 700;
}
.popup__price span {
font-size: 16px;
}
.popup__type {
margin: 0;
margin-bottom: 5px;
}
.popup__text--capacity {
margin-bottom: 0;
}
.popup__features {
margin: 0;
padding: 0;
list-style: none;
}
.popup__features {
margin-bottom: 10px;
}
.popup__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
}
.popup__feature--wifi {
background-position: 2px 5px;
}
.popup__feature--dishwasher {
background-position: 2px -25px;
}
.popup__feature--parking {
background-position: 3px -55px;
}
.popup__feature--washer {
background-position: 2px -85px;
}
.popup__feature--elevator {
background-position: 2px -143px;
}
.popup__feature--conditioner {
background-position: 3px -114px;
}
.popup__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup__photo {
margin-right: 5px;
margin-bottom: 5px;
}
.popup__photo:hover {
border: 2px solid #ff5635;
}
/**
* Сообщения об успешном и неуспешном создании объявления
*/
.success,
.error {
position: fixed;
top: 0;
left: 0;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 300px;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.8);
}
.success__message,
.error__message {
position: relative;
color: #ffffff;
font-size: 50px;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кексобукинг</title>
</head>
<body>
<main>
<div class="promo">
<h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
<img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
</div>
<!-- Карта объявлений -->
<section class="map map--faded">
<!-- Метки объявлений -->
<div class="map__pins">
<div class="map__overlay">
<h2 class="map__title">И снова Токио!</h2>
</div>
<button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
<img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
<svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
<defs>
<path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
</defs>
<ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
<text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
</svg>
</button>
</div>

The problem is in your variable similarAds. You have already defined it once and use the same value in your loop. So the simple way is to put your variable into the loop to redefined it with every new step.
'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var renderPin = function (pinData) {
var element = document.createElement('button');
var newImage = document.createElement('img');
element.className = 'map__pin';
element.style.top = pinData.location.y + 'px';
element.style.left = pinData.location.x + 'px';
newImage.src = pinData.author.avatar;
newImage.alt = pinData.offer.type;
element.appendChild(newImage);
return element;
};
var renderPins = function () {
var fragment = document.createDocumentFragment();
for (var i = 0; i < ADS_COUNT; i++) {
let similarAds = {
'author': {
'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
},
'offer': {
'type': TYPES[getRandomInt(0, TYPES.length - 1)],
},
'location': {
'x': getRandomInt(0, mapOverlay.offsetWidth),
'y': getRandomInt(130, 630),
}
};
fragment.appendChild(renderPin(similarAds));
}
pins.appendChild(fragment);
};
map.classList.remove('map--faded');
renderPins();
/* Общие стили. Каркас
========================================================================== */
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
url("../fonts/Roboto-Bold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-box-component {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.hidden {
display: none;
}
body {
max-width: 1200px;
margin: 0 auto;
color: #353535;
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
background-color: #f0f0ea;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* Карта с объявлениями
========================================================================== */
.promo {
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
width: 211px;
height: 45px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.map {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
height: 750px;
background-color: #82bcc0;
background-image: url("../img/map.jpg");
background-repeat: no-repeat;
background-position: center bottom;
border-radius: 0 0 10px 10px;
}
.map__pins {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.map__overlay {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.map__title {
width: 100%;
margin: 0;
padding: 0;
margin-top: 170px;
font-size: 85px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.map--faded .map__overlay {
opacity: 1;
}
/**
* Метка объявления
*/
.map__pin {
position: absolute;
z-index: 1;
width: 50px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.map__pin:focus {
outline: none;
-webkit-filter: drop-shadow(0 0 5px red);
filter: drop-shadow(0 0 5px red);
}
.map__pin img {
position: absolute;
z-index: 1;
top: 5px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.map__pin:not(.map__pin--main)::after {
content: "";
position: absolute;
width: 50px;
height: 70px;
top: 0;
left: 0;
background-image: url("../img/pins.svg");
background-repeat: no-repeat;
background-position: 0 -9px;
}
.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
background-position: 0 -88px;
}
.map__pin:active img,
.map__pin--active img {
-webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}
.map__pin--main {
width: 65px;
height: 65px;
cursor: move;
}
.map__pin--main img {
position: relative;
z-index: 1;
padding: 2px 6px 6px;
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
border: solid 5px #ff5635;
border-radius: 50%;
background-color: #ffffff;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.map__pin--main:active img,
.map__pin--main--active img {
background-color: #ffffff;
}
.map__pin--main svg {
position: absolute;
z-index: 0;
top: -50px;
left: -47px;
width: 156px;
height: 156px;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: rotate(120deg) scale(0);
-ms-transform: rotate(120deg) scale(0);
transform: rotate(120deg) scale(0);
-webkit-transform-origin: 78px 78px;
-ms-transform-origin: 78px 78px;
transform-origin: 78px 78px;
}
.map__pin--main:hover ellipse {
fill: rgba(255, 86, 53, 0.9);
}
.map__pin--main::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid 5px transparent;
border-top: solid 18px #fff;
border-bottom: 0;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: translate(-50%, -6px);
-ms-transform: translate(-50%, -6px);
transform: translate(-50%, -6px);
border-top-width: 22px;
border-top-color: #ff5635;
}
.map--faded .map__pin--main svg {
-webkit-transform: rotate(-20deg) scale(1);
-ms-transform: rotate(-20deg) scale(1);
transform: rotate(-20deg) scale(1);
}
.map--faded .map__pin--main::after {
-webkit-transform: translate(-50%, -30px);
-ms-transform: translate(-50%, -30px);
transform: translate(-50%, -30px);
}
.map__pin--main text {
font-size: 7px;
font-weight: 700;
fill: #ffffff;
}
/**
* Фильтры объявления
*/
.map__filters-container {
width: 100%;
background-color: rgba(3, 28, 45, 0.5);
}
.map__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 960px;
height: 46px;
margin: 0 auto;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 1;
}
.map--faded .map__filters {
opacity: 0;
}
.map__filter {
height: 30px;
margin-right: 10px;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.map__filter:hover {
border: 1px solid #ffaa99;
}
.map__filter:focus {
outline: none;
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
background-color: #f8f8f8;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
border-radius: 3px;
}
.map__feature--wifi {
background-position: 2px 5px;
}
.map__checkbox:checked + .map__feature--wifi {
background-position: 2px -172px;
}
.map__feature--dishwasher {
background-position: 2px -25px;
}
.map__checkbox:checked + .map__feature--dishwasher {
background-position: 2px -202px;
}
.map__feature--parking {
background-position: 3px -55px;
}
.map__checkbox:checked + .map__feature--parking {
background-position: 2px -232px;
}
.map__feature--washer {
background-position: 2px -85px;
}
.map__checkbox:checked + .map__feature--washer {
background-position: 2px -262px;
}
.map__feature--elevator {
background-position: 2px -143px;
}
.map__checkbox:checked + .map__feature--elevator {
background-position: 2px -321px;
}
.map__feature--conditioner {
background-position: 3px -114px;
}
.map__checkbox:checked + .map__feature--conditioner {
background-position: 2px -291px;
}
.map__feature:hover {
-webkit-box-shadow: inset 0 0 0 1px #ffaa99;
box-shadow: inset 0 0 0 1px #ffaa99;
}
.map__feature:focus,
.map__checkbox:focus + .map__feature {
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature:active {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #ff6547;
}
.map__checkbox:checked + .map__feature {
background-color: #ff6547;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
/**
* Карточка объявления
*/
.map__card {
position: absolute;
z-index: 2;
top: 150px;
left: 20px;
padding: 10px 10px 20px;
width: 230px;
font-size: 12px;
border-radius: 5px;
background-color: #ffffff;
}
.popup__avatar {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 10px;
}
.popup__close {
position: absolute;
bottom: 100%;
right: 0;
padding: 0;
font-size: 0;
border: 0;
background: none;
}
.popup__close:active {
-webkit-transform: translate(1px, 1px);
-ms-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
.popup__close:focus {
outline: none;
-webkit-box-shadow: 0 0 10px 3px #ff6547;
box-shadow: 0 0 10px 3px #ff6547;
}
.popup__close::after {
font-size: 50px;
line-height: 40px;
display: block;
content: "×";
color: #000000;
}
.popup__title {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 18px;
}
.popup__text {
margin: 0;
margin-bottom: 10px;
}
.popup__text--price {
font-size: 22px;
font-weight: 700;
}
.popup__price span {
font-size: 16px;
}
.popup__type {
margin: 0;
margin-bottom: 5px;
}
.popup__text--capacity {
margin-bottom: 0;
}
.popup__features {
margin: 0;
padding: 0;
list-style: none;
}
.popup__features {
margin-bottom: 10px;
}
.popup__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
}
.popup__feature--wifi {
background-position: 2px 5px;
}
.popup__feature--dishwasher {
background-position: 2px -25px;
}
.popup__feature--parking {
background-position: 3px -55px;
}
.popup__feature--washer {
background-position: 2px -85px;
}
.popup__feature--elevator {
background-position: 2px -143px;
}
.popup__feature--conditioner {
background-position: 3px -114px;
}
.popup__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup__photo {
margin-right: 5px;
margin-bottom: 5px;
}
.popup__photo:hover {
border: 2px solid #ff5635;
}
/**
* Сообщения об успешном и неуспешном создании объявления
*/
.success,
.error {
position: fixed;
top: 0;
left: 0;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 300px;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.8);
}
.success__message,
.error__message {
position: relative;
color: #ffffff;
font-size: 50px;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кексобукинг</title>
</head>
<body>
<main>
<div class="promo">
<h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
<img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
</div>
<!-- Карта объявлений -->
<section class="map map--faded">
<!-- Метки объявлений -->
<div class="map__pins">
<div class="map__overlay">
<h2 class="map__title">И снова Токио!</h2>
</div>
<button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
<img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
<svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
<defs>
<path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
</defs>
<ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
<text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
</svg>
</button>
</div>

Zoom In Image (JavaScript)

I have polaroid gallery images style. But what I want is when I click the image, it will zoom in or enlarge the image.
I don't know how to achieve it on my else statement. I tried to flipp it when I click the image and it works like this:
.photo.flipped .side-front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.photo.flipped .side-back {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
JavaScript:
item.addEventListener('click', function () {
if ((currentData != dataSize[item.id]) || (currentData == null)) {
select(dataSize[item.id]);
shuffleAll();
} else {
/*Paul Zoom In Photo*/
item.classList.contains('zoomed') === true ? item.classList.remove('zoomed') : item.classList.add('zoomed');
/*END*/
}
});
And this is my CSS:
body {
background-color: #F2EBE2;
}
.fullscreen {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.photo {
position: absolute;
cursor: pointer;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
transition: all 0.6s;
}
.side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: transform 0.6s;
-moz-transition: transform 0.6s;
transition: transform 0.6s;
}
.side-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
display: table;
}
.side-back div {
display: table-cell;
vertical-align: middle;
background-color: rgb(0, 0, 0);
}
.side-back p {
padding: 2px;
color: #d7551d;
font-family: Helvetica, Arial, sans-serif;
}
figure {
width: 150px;
position: absolute;
/* padding: 30px; */
margin: 0 auto;
text-align: center;
background-color: rgb(10, 10, 10);
}
figure img {
height: auto;
max-width: 100%;
margin: 0 auto;
/*margin-bottom: 15px;*/
}
figure img.zoomed{
position: fixed;
top: 5vh;
bottom: 5vh;
left: 5vw;
right: 5vw;
max-width: 90vw;
max-height: 90vh;
margin: auto;
border: 4px solid #000
}
figure figcaption {
font-family: Comic Sans, Comic Sans MS, cursive;
color: #f85a16;
font-size: 10px;
}
.navbar {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
text-align: center;
background-color: black;
z-index: 999;
}
button {
background-color: transparent;
padding: 10px 24px;
color: #ffffff;
border: 2px solid black;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}
button:hover {
background-color: #a00;
color: white;
}
#copyright {
font-family: Consolas, Verdana, Arial, sans-serif;
position: fixed;
color: #ccc;
text-decoration: none;
bottom: 20px;
right: 10px;
}
#copyright:hover {
color: white;
text-decoration: none;
}
#media screen and (max-width: 767px) {
#forkme {
display: none;
}
#copyright {
position: relative;
display: block;
text-align: center;
right: 0px;
bottom: 0px;
}
}

One way, as mentioned, is to use transform: scale(2);
Another easy way is:
document.querySelector('img.sample-image').addEventListener('click', function() {
this.classList.toggle('sample-image-large');
});
.sample-image {
transition:all 1s ease;
width: 100%;
}
.sample-image-large {
width: 200% !important;
}
<img src="http://c.s-microsoft.com/en-us/CMSImages/Explore_ShareBG_0330_1600x560_EN_US.jpg?version=19f9bdc2-cbab-929d-bd00-48f537b9f7e8" class="sample-image">