Fade out script for preloader not working - javascript

I am a noob in HTML coding. I am just using some online available templates. I want to fade out the preloader in the below example. But it's not fading out. I tried replacing jQuery with $ in the script. It's still not working. Check the CodePen code! Any help would be appreciated. Thanks!
Style CSS
*{
margin: 0;
padding: 0;
font-family: verdana;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.title h1{
color: #000;
font-size: 50px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Sayan</title>
<link rel="stylesheet" type="text/css" href="css/styl.css">
</head>
<body>
<div class="title"><h1>SAYAN</h1></div>
<div class="loader-wrapper">
<span class="loader"><spam class="loader-inner"></span></span>
</div>
<script>
jQuery(window).on("load",function(){
jQuery(".loader-wrapper").fadeOut("slow");
});
</script>
</body>
</html>

Work well if you don't forget to import the JQuery library:
*{
margin: 0;
padding: 0;
font-family: verdana;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.title h1{
color: #000;
font-size: 50px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Sayan</title>
<link rel="stylesheet" type="text/css" href="css/styl.css">
</head>
<body>
<div class="title"><h1>SAYAN</h1></div>
<div class="loader-wrapper">
<span class="loader"><spam class="loader-inner"></span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
</script>
</body>
</html>
Please be aware next time of what is written in your console.

Related

How can I make loader cover the all page

There are my codes below. I want the loader cover the all page but it just covers the top. How can I make it cover the all page? There are my codes below. I want loader cover the all page but it just covers the top. How can I make it cover the all page?
/*loader*/
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #333233;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 3s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 3s infinite ease-in;
}
#keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
#keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}
<!--loader-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha512-AFwxAkWdvxRd9qhYYp1qbeRZj6/iTNmJ2GFwcxsMOzwwTaRwz2a/2TX225Ebcj3whXte1WGQb38cXE5j7ZQw3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
</script>
<!--loader-->
add position:fixed in main wrapper
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0

Can I make this menu animation smoother?

I'm trying to turn my menu into an X shape with animations. Here's a video of what it currently looks like.
Video
I want to make it more smooth and actually make the cross symmetrical.
I have create a code snippet with all the relevant code below.
const NAV_BTN = document.querySelector('.navmenu');
const NL_1 = document.querySelector('.l1');
const NL_2 = document.querySelector('.l2');
const NL_3 = document.querySelector('.l3');
NAV_BTN.addEventListener('click', () => {
navToClose();
});
const navToClose = () => {
NL_1.style.animation = '0.5s l1Close forwards';
NL_2.style.animation = '0.5s l2Close forwards';
NL_3.style.animation = '0.5s l3Close forwards';
};
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.5s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s;
}
.l3 {
width: 20px;
transition: all 0.5s;
margin-left: auto;
}
.navmenu:hover>.l1,
.navmenu:hover>.l3 {
width: 40px;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
/* ANIMATIONS */
#keyframes l1Close{
0%{
transform: rotate(0deg);
margin: 0;
}
100%{
transform: translate(0,0) rotate(-45deg);
width: 40px;
}
}
#keyframes l2Close{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes l3Close{
0%{
transform: rotate(0deg);
}
100%{
transform: translate(0,0) rotate(45deg);
width: 40px;
}
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>
I would appreciate any help, and will reply if you have any questions.
Thanks.
The following code should be close enough to the solution you are aiming for. The transition can be modified according to your needs and the seconds must be adapted accordingly.
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.8s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s linear;
}
.l2 {
width: 40px;
transition: all 0.3s linear;
}
.l3 {
width: 20px;
transition: all 0.5s linear;
margin-left: auto;
}
.navmenu:hover>.l1 {
width: 40px;
position: relative;
top: 7px;
transform: rotate(-45deg);
}
.navmenu:hover>.l3 {
width: 40px;
position: relative;
top: -7px;
transform: rotate(45deg);
}
.navmenu:hover>.l2 {
height: 1.5px;
opacity:0;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>

My webpage seems to work on certain platforms and not on others, the css doesn't get applied, why is this?

Here is a link to my webpage https://taniaswebpages.com/, specifically Website 5 - Snowfall that I am currently working on, the webpage only works for me on Safari on Iphone6s, and doesn't apply the css on Mac Chrome/Safari. But for others it works... why is it changing depending on the type of platform or user?
HTML/CSS:
body.mainpage2 {
margin: 0;
padding: 0;
font-family: lato;
background-color: #e74c3c;
}
.color {
margin-top: 350px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 40px;
text-transform: uppercase;
margin: 15px;
letter-spacing: 0.1em;
}
.color button {
background: none;
outline: none;
color: white;
border: 2px solid white;
cursor: pointer;
font-size: 22px;
border-radius: 5px;
box-shadow: 5px 6px 30px 5px #fff;
width: 200px;
}
body.mainpage3 {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(221, 106, 95, 0.81));
margin: 0;
padding: 2em 2em 4em;
font-family: Lato;
font-size: 16.5px;
line-height: 24px;
float;
align-content: flex-start;
display: block;
}
input[type=button] {
width: 8%;
border: none;
padding: 8px 8px;
cursor: pointer;
color: palevioletred;
}
.image1 {
position: relative;
right: -400px;
bottom: 600px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
.image2 {
position: relative;
right: -100px;
bottom: 200px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
body.mainpage4 {
margin: 0;
padding: 0;
background-color: darkseagreen;
}
.container1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container1 span {
text-transform: uppercase;
display: block;
}
.Words1 {
color: forestgreen;
font-family: monospace;
font-size: 60px;
font-weight: 700;
letter-spacing: 6px;
margin-bottom: 4px;
position: relative;
}
.Words2 {
color: red;
font-family: cursive;
font-size: 40px;
font-weight: 750;
letter-spacing: 2px;
animation: blinkingText 1s linear infinite;
}
#keyframes blinkingText {
0% {
color: #f00;
}
49% {
color: transparent;
}
50% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #f00;
}
}
.image {
background-size: cover;
width: 100%;
height: 1000px;
position: relative;
overflow: hidden;
}
.snow1 {
background: url(https://taniaswebpages.com/snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 3s infinite linear;
}
.snow2 {
background: url(snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 8s infinite linear;
}
#keyframes snowfall {
0% {
background-position: 0px 0px
}
100% {
background-position: 100px 650px
}
}
#keyframes snowfallSecond {
0% {
background-position: 0px -100px
}
100% {
background-position: 0px 650px
}
}
<!DOCTYPE html>
<html>
<head>
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
</head>
<body class="mainpage4">
<div class="container1">
<span class="Words1">Merry Christmas</span>
<span class="Words2"> and Happy Holidays!</span>
</div>
<div class="image">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html>
Try changing
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
to
<link href="taniaWebsite2.css" type="text/css" rel="stylesheet">
With quotes around the attribute values and all lowercase.

How to get an Arrow shape on the below provided JS filddle circular progress bar

I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks
You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/

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

Categories