css make element slanted and hoverable

css make element slanted and hoverable - javascript

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>

Related

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);
}
}

CSS transform scale fit to window size

I have tried lot, but didn't get any proper solution.
Here is my code:
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
$(".img").toggleClass("active", 1000);
});
});
body {
background: red;
width: 100%;
margin: 0;
}
.col {
width: 30%;
}
.img {
display: block;
transition: all 0.5s ease;
position: relative;
transition: all 0.5s ease;
-webkit-transition: 1s
}
.img img {
width: 100%;
}
.img.active {
position: absolute;
left: 0;
top: 0;
transform: scale(2.5);
-webkit-transform-origin: top left;
transition: all 0.5s ease;
}
.img.active img {
transition: all 0.5s ease;
}
.zoom-close {
position: absolute;
right: 10px;
bottom: 10px;
background: #eee;
border: 0;
width: 32px;
height: 32px;
padding: 8px 8px 15px;
cursor: pointer;
outline: 0;
border-radius: 0;
transition: all 0.5s ease;
}
.zoom-close.transform {
border-radius: 100%;
transition: all 0.5s ease;
z-index: 10;
background: #fff;
position: absolute;
right: 5px;
top: 18px;
}
.zoom-close.transform .zoom-inner {
opacity: 0;
transition: all 0.5s ease;
}
.zoom-close.transform .zoom {
border: 0;
}
.zoom-close.transform .zoom:before {
width: 2px;
height: 17px;
top: 1px;
left: 7px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom-close.transform .zoom:after {
height: 2px;
width: 17px;
top: 9px;
left: -1px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom {
width: 10px;
height: 10px;
border-radius: 8px;
position: relative;
border: 2px solid #000;
}
.zoom:before {
content: '';
width: 2px;
height: 8px;
background: #000;
display: block;
top: 1px;
left: 4px;
position: absolute;
transition: all 0.5s ease;
}
.zoom-inner {
width: 8px;
height: 3px;
display: block;
background: #000;
position: absolute;
top: 10px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom:after {
content: '';
height: 2px;
width: 8px;
background: #000;
display: block;
top: 4px;
left: 1px;
position: absolute;
transition: all 0.5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250">
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
</div>
Could anyone help me in the below case:
<div class="img"> should be fit in to the window size (100% width), when we click on the <button class="zoom-close"> with the same transform effect.
(Please note: CSS transform property is not compulsory but I need the similar effect as it is..)

You need to get the screen sizes like width and height on zoom event
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250" >
</div>
<br><br><br>
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
JS
var flag=0;
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
// $(".img").toggleClass("active", 1000);
var height= window.screen.height;
var width = window.screen.width;
if(flag == 0){
$("img").css("width", "15vw");
$("img").css("height", "15vw");
flag=1;
}
else{
$("img").css("width", "100vw");
$("img").css("height", "100vw");
flag=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>

From Sass into Css

Can someone help me to convert this sass code into just clear css,of course need animation to still work,i think that here will be needed a bit more js code,beforehard thanks.
https://codepen.io/anon/pen/ENqppw
<div class="search">
<span class="search_icon"></span>
</div>
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin:22px;
transition: all .3s ease;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search_icon').on('click', function() {
$('.search').toggleClass('open clicked');
});
});

.search {
width: 100px;
height: 100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin: 50px;
position: absolute;
}
.search.open {
width: 90%;
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin: 22px;
transition: all .3s ease;
}
.search_icon:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.search_icon:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open .search_icon {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left: 95%;
}
.open .search_icon:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
.open .search_icon:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}

here you go, you can use this site to help you with converting http://www.sassmeister.com/
.search {
width: 100px;
height: 100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin: 50px;
position: absolute;
}
.search.open {
width: 90%;
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin: 22px;
transition: all .3s ease;
}
.search_icon:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.search_icon:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open .search_icon {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left: 95%;
}
.open .search_icon:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
.open .search_icon:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}

how to make a search bar responsive using jquery or css3

function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('.search-input').val('');
}
}
.search-wrapper {
position: absolute;
left: 79%;
top: -25px;
transform: translate(-50%, 50%);
}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: black;
border-radius: 16px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 400px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0 70px 0 20px;
position: absolute;
top: 0;
left: 0;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
opacity: 0;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #fff;
padding: 0;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
background: #FE5F55;
border-radius: 2px;
left: 9px;
top: 18px;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
border: 4px solid #FE5F55;
border-radius: 50%;
left: 0;
top: 0;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search-wrapper">
<div class="input-holder">
<input type="text" class="search-input" placeholder="Type to search" />
<button class="search-icon" onclick="searchToggle(this, event);"><span></span>
</button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
After a lot of research, changes I finally managed to make and position my search bar. But according to me it is not performing the search function. for example, if I type anything in it like 'home' and press the search icon nothing happens. So I want to ask whether I am wrong i.e. the search function is working and secondly I want to make it responsive like Google's search bar. I mean I want it to remember searches and also shorten the results as I type.
Any help would be highly appreciated. Thanks :)

I highly recommend you to use Bootstrap. It only uses CSS and is leightweight. You can find it well documented at Bootstrap Forms and W3S. If you don't want to use a Framework you can try building something for yourself. For that purpose you can simply look again at bootstrap (or another CSS Framework) and copy whatever you want to use.
Again, you should use a CSS Framework for responsive designs, they help alot and make your life easier.
Regards, Megajin

We Keep Coding

JavaScript is the programming language of the Web.

css make element slanted and hoverable - javascript

Related

Hover on the div "rectange" is not working

CSS transform scale fit to window size

jQuery slider converted to vanilla JavaScript not working

From Sass into Css

how to make a search bar responsive using jquery or css3

Categories

Resources