Zoom In Image (JavaScript)

Zoom In Image (JavaScript) - 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">

Related

How Do I Close The Hamburger Menu When Navigating Back And Forth Between Web Pages?

I've got some Javascript running on my website (the works really well) that enables my menu to close the hamburger menu after a link in it has been clicked.
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
I'd like to set up the hamburger menu so that it will also close automatically when navigating back and forth (using the back and forward buttons). Would this involve using this if(performance.getEntriesByType("navigation")[0].type == "back_forward") script? Any knowledge that you could share with me on how to achieve this would be very much appreciated.
The code for my menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
The CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

Hover on the div "rectange" is not working

I have a div that has the name speech-bubble1 and I want to put a hover element to that, it will expand the scale however, it is not working, I have tried putting other hovering properties and they are working fine, please help me.
I want to scale the speech bubble once I hover over it. Thank you in advance!
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>

Because you have given z-index: -1; remove or make it z-index:
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: 1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1:hover {
width: 100%;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
1"
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
and add:
.speech-bubble1:hover {
width: 100%;
}

If you just want scale the "speech bubble" when hover it, you need to :
FIRST = replace translate animation on <div class="text1">
SECOND = place a scale transform on <div class="speech-bubble1">
Like this :
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
}
.speech-bubble1:hover {
width: 584px;
height: 712px;
transform: scale(1.1);
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}

jQuery slider converted to vanilla JavaScript not working

I'm building a slider and I want to avoid jQuery.
So I'm trying to convert some jQuery code to vanilla JavaScript.
Here's the jQuery:
setInterval(function() {
var $curr = $('#slider1 input[type=radio]:checked');
var $next = $curr.next('input');
if(!$next.length) $next = $('#slider1 input[type=radio]').first();
$next.prop('checked', true);
}, 2000);
My code is below, but it's not working.
What's going wrong?
setInterval(() => {
let $curr = document.querySelectorAll('#slider1 input[type=radio]:checked'),
$next = $curr.nextSibling;
if (!$next.length) {
$next = document.querySelectorAll('#slider1 input[type=radio]').firstChild;
}
$next.setAttribute('checked', true);
}, 3000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" checked="checked" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<input type="radio" name="slides" id="slides_6" />
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>
View on Codepen.
Edit
I came up with this solution:
setInterval(function() {
var currentID = document.querySelector('input[name="slides"]:checked').id;
var idNoArr = currentID.split('');
var intIdNo = parseInt(idNoArr[1]);
var nextIdNo = intIdNo + 1;
var NextId = idNoArr[0] + '' + nextIdNo;
var NextInput = document.getElementById(NextId);
if (!NextInput) {
NextId = idNoArr[0] + '_1';
}
document.getElementById(NextId).checked = true;
}, 1000);

There are several issues, including:
nextSibling isn't limited to inputs, and may even select white space between elements.
Elements don't have a length property.
Setting an attribute only sets the default state, not the current state.
I recommend selecting a list of all the inputs with querySelectorAll and then cycling through them using an index. To cycle the index within the appropriate bounds, I'm using the remainder of the current index divided by the total number of inputs.
Edit:
I see that your jQuery code determines which input is checked before changing the slide. This allows the automatic rotation to pick up where the user left off after they manually select a slide. I've modified my code accordingly.
You might also consider some functionality to stop or delay the automatic rotation if the user manually selects a slide. When someone clicks to a specific slide, I often choose to delay the automatic rotation for a few seconds or even have it stop completely. Just an idea.
Here's a working example:
// select node list of all inputs
var allInputs = document.querySelectorAll('#slider1 input[type=radio]');
// function to determine index of "checked" input in the list
function getCheckedIndex(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].checked) {
return i;
}
}
}
// start the interval
setInterval(() => {
// determine index of "checked" input
let index = getCheckedIndex(allInputs);
// determine the next index
index = (index + 1) % allInputs.length;
// set the "checked" property
allInputs[index].checked = true;
}, 1000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" id="slides_1">
<input type="radio" name="slides" id="slides_2">
<input type="radio" name="slides" id="slides_3" checked>
<input type="radio" name="slides" id="slides_4">
<input type="radio" name="slides" id="slides_5">
<input type="radio" name="slides" id="slides_6">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</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 make a concentric circle on an existing circle which shows on anchor tag click

I have a small circle on top of which is a "+" button. When clicked, a circle shows up (a dotted one) and the data from my database is shown along its circumference.
Now I want another concentric circle outside of this, and it should also show on the button click, along with the first circle.
function toggleDiv(divId){
$("#"+divId).toggle();
}
.post-share{
display: block;
width: 74px;
height: 34px;
margin: 40px 0px 0px 0px;
background: #3e599a;
text-decoration: none;
width: 110px;
font: 12px;
color: #FFFFFF;
position: relative;
position:fixed;
top: 40%;
left: 50%;
z-index:99;
text-align: center;
vertical-align: middle;
}
.post-share span{
width: 15px;
height: 18px;
padding: 3px;
display: block;
position: absolute;
top: -24px;
right: 0;
background-color: #080563;
color: #FFFFFF;
font-weight: bold;
vertical-align: middle;
font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
text-indent: 0;
}
.social-buttons-text {
font-size: 4px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
text-align: left;
}
.sphere{
height: 80px;
width:80px;
border-radius: 50%;
}
/* for circle */
* {
padding: 0px;
margin: 0px;
transition: 1s;
}
html {
background-color: hsla(190, 60%, 50%,1);
overflow: hidden;
}
#wrapper {
margin: 200px auto;
height: 200px;
width: 600px;
}
.bubble {
border-radius: 100%;
height: 40px;
width: 40px;
display: inline-block;
margin: 0px 15px 0px 15px;
}
.animate {
animation: scaleWobble 2s infinite alternate ease;
}
#red {
background-color: hsla(350, 50%, 50%, 1);
}
#yellow {
background-color: hsla(70, 50%, 50%, 1);
}
#green {
background-color: hsla(120, 70%, 40%, 1);
}
#keyframes scaleWobble {
from {
height: 100px;
width: 100px;
}
to {
height: 125px;
width: 125px;
}
}
/**
* Position icons into circle (SO)
* http://stackoverflow.com/q/12813573/1397351
*/
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); }
.deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
.deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); }
.deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
.deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); }
.deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); }
.deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); }
.deg180 { transform: translate(-12em); }
.deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); }
.deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); }
.deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); }
.deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); }
.deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); }
.deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); }
/* this is just for showing the angle on hover */
.circle-container a:not(.center)::before {
position: absolute;
width: 7em;
color: white;
opacity: 0;
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 1px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after{
opacity: 1;
}
.circle-container a:not(.center)::after {
position: absolute;
left: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: #fffea1;
content: attr(myattri);
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="post-share sphere yellow" id="name">erwerew
<span>+</span>
</span>
<div id="myContent" class='circle-container' style="display:none">
</div>

This may not be 100% the answer you are looking for, but it seems whatever you are doing, you may be making it more complicated then it needs to be.
You can create these circles by using a div with a border-radius:50%;
See this example which i think is acheving what you want with a lot less code.
JsFiddle Demo: https://jsfiddle.net/yfpnbf4z/3/
$("#circleToggle").click(function() {
$("#circle1").fadeToggle("slow");
$("#circle2").fadeToggle("slow");
if ($("#circle1").is(":hidden")) {
$("#circleToggle").html("+");
} else {
$("#circleToggle").html("-");
}
});
.container {
background: #333;
position: relative;
height: 500px;
width: 500px;
}
.button {
position: absolute;
left: 230px;
top: 5px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
background: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
}
.circle {
border-radius: 50%;
border: 1px dashed red;
display: none;
}
#circle1 {
position: absolute;
top: 150px;
left: 150px;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
color: #fff;
}
#circle2 {
position: absolute;
top: 50px;
left: 50px;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="button" id="circleToggle">+</div>
<div class="circle" id="circle1">Some data</div>
<div class="circle" id="circle2"></div>
</div>
I hope this is useful to you mate.

We Keep Coding

JavaScript is the programming language of the Web.

Zoom In Image (JavaScript) - javascript

Related

How Do I Close The Hamburger Menu When Navigating Back And Forth Between Web Pages?

Hover on the div "rectange" is not working

jQuery slider converted to vanilla JavaScript not working

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

How to make a concentric circle on an existing circle which shows on anchor tag click

Categories

Resources