I have this product card, which i am using for a model type card:
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 200px;
left: 0;
top: 100%;
background-color: #fff;
transform: skewY(0deg);
transform-origin: 0 0;
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>
I need it to be like this:
https://res.cloudinary.com/piersolutions/video/upload/v1626393248/Screen_Recording_2021-07-15_at_7.47.07_PM_nlksby.mov
however, I cannot figure out 1) how to get the item slanted, and 2) to only do it on hover. I have been trying for days and cannot find anything on how to do this!! I tried using the hover css tag, but it didn't work, because i don't know how to mkae it appear and disapear on hover, and slanted is even worse :( Any ideas?
Here is the working example, you just need to move a skewed element on hovering .rooted-increment.
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 100px;
left: 0;
top: 100%;
background-color: #ffffff54;
transform: skewY(25deg);
transform-origin: 0 0;
transition: all 0.3s ease-in;
}
.rooted-increment:hover .cover:after {
transform: skewY(25deg) translateY(-100px);
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>
You can do like this also.
#import 'https://fonts.googleapis.com/css?family=Do+Hyeon';
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clear-fix:after {
display: block;
clear: both;
content: "";
}
.img-responsive {
max-width: 100%;
height: auto;
}
.card__collection {
position: relative;
display: block;
background: rgba(10, 10, 10, 0.5);
padding: 10px;
font-family: "Do Hyeon", sans-serif;
overflow: hidden;
}
.card__collection .cards {
width: 300px;
height: 400px;
display: block;
background-size: cover;
float: left;
border-radius: 15px;
position: relative;
overflow: hidden;
background-position: center;
margin: 10px;
}
.card__collection .cards--one {
backface-visiblility: hidden;
}
.card__collection .cards--one:hover:after {
bottom: -20px;
}
.card__collection .cards--one:hover:before {
bottom: -10px;
}
.card__collection .cards--one:hover .cards--one__rect {
left: 45%;
}
.card__collection .cards--one:hover .cards--one__rect--back {
left: 50%;
}
.card__collection .cards--one::after {
content: "";
display: block;
position: absolute;
height: 70px;
transform: rotate(-3deg);
background: #e660e3;
position: absolute;
bottom: -80px;
left: 0;
right: -10px;
z-index: 9;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one:before {
content: "";
display: block;
position: absolute;
height: 80px;
transform: rotate(-3deg);
bottom: -90px;
left: 0;
background: #fff;
right: -10px;
z-index: 5;
transition: all 0.2s ease-in;
transition-delay: 0.1s;
}
.card__collection .cards--one__rect {
color: #fff;
text-transform: uppercase;
font-size: 18px;
background: #0f9bc0;
width: 126px;
height: 55px;
transform: skewY(5deg);
position: absolute;
display: block;
top: 60%;
left: -45%;
z-index: 1;
line-height: 3.3rem;
text-align: center;
transition: all 0.2s ease-in;
}
.card__collection .cards--one__rect--back {
display: block;
background: rgba(34, 65, 154, 0.8);
width: 126px;
height: 55px;
transform: skewY(7deg);
position: absolute;
top: 65%;
left: -50%;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one__rect p {
transform: skewY(-7deg);
position: relative;
}
.card__collection .cards--two {
position: relative;
backface-visibility: hidden;
}
.card__collection .cards--two p {
position: absolute;
top: 83%;
left: -100%;
text-transform: capitalize;
color: #fff;
font-size: 20px;
z-index: 8;
transition: all 0.6s ease;
}
.card__collection .cards--two:hover p {
left: 8%;
}
.card__collection .cards--two:hover img {
transform: translateY(-15px);
}
.card__collection .cards--two:hover .cards--two__rect {
top: 75%;
}
.card__collection .cards--two:hover .cards--two__rect:before {
transform: translateY(15px);
}
.card__collection .cards--two:hover li {
transform: translateY(0);
}
.card__collection .cards--two:hover .cards--two__tri {
right: -40%;
}
.card__collection .cards--two:hover .cards--two__tri:before {
right: -312px;
}
.card__collection .cards--two img {
transition: all 0.2s ease;
}
.card__collection .cards--two__tri {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #fff;
opacity: 0.9;
position: absolute;
display: block;
top: 0;
right: -100%;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__tri:before {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #57ccfd;
position: absolute;
content: "";
display: block;
top: -220px;
right: -612px;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.card__collection .cards--two__rect {
width: 750px;
height: 200px;
background: #fff;
display: block;
position: absolute;
top: 175%;
left: -78%;
transform: rotate(30deg);
z-index: 5;
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__rect:before {
content: "";
display: block;
width: 100%;
position: relative;
height: 100%;
background: #f07306;
transform: translateY(200px);
z-index: 2;
transition: all 0.3s ease-in-out;
transition-delay: 0.1s;
}
.card__collection .cards--two ul {
list-style: none;
position: absolute;
bottom: 0;
left: 10px;
z-index: 9;
}
.card__collection .cards--two ul li {
display: inline-block;
font-size: 16px;
margin: 7px;
color: #fff;
transition: all 0.2s ease-in-out;
transform: translateY(100px);
}
.card__collection .cards--two ul li:nth-child(2) {
transition-delay: 0.2s;
}
.card__collection .cards--two ul li:nth-child(3) {
transition-delay: 0.3s;
}
.card__collection .cards--two ul li:nth-child(4) {
transition-delay: 0.4s;
}
.card__collection .cards--three {
position: relative;
z-index: 10;
}
.card__collection .cards--three:hover .cards--three__rect-1 {
left: 10%;
}
.card__collection .cards--three:hover .cards--three__rect-1 .shadow-1 {
left: -20%;
}
.card__collection .cards--three:hover .cards--three__rect-2 {
left: 60%;
}
.card__collection .cards--three:hover .cards--three__rect-2:before {
left: -100%;
}
.card__collection .cards--three:hover .cards--three__rect-2:after {
left: 80%;
}
.card__collection .cards--three:hover .cards--three__rect-2 .shadow-2 {
left: -10%;
}
.card__collection .cards--three:hover .cards--three__circle {
transform: scale(1);
}
.card__collection .cards--three:hover .cards--three__circle:before {
transform: scale(0.9);
}
.card__collection .cards--three:hover .cards--three__list li {
transform: translateX(0);
}
.card__collection .cards--three__rect-1 {
background: #fff;
width: 200px;
height: 110px;
transform: skewX(-20deg);
display: block;
position: absolute;
top: 73%;
opacity: 0.9;
left: -100%;
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-1 p {
font-size: 20px;
color: #fff;
transform: skewX(20deg);
line-height: 6rem;
}
.card__collection .cards--three__rect-1 .shadow-1 {
background: #9b1308;
width: 230px;
height: 100px;
display: block;
position: absolute;
left: -200%;
z-index: -1;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2 {
width: 100px;
height: 70px;
background: #fff;
position: absolute;
top: 65%;
left: 1000%;
opacity: 0.9;
transform: skewX(-20deg);
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-2::before {
content: "";
display: block;
width: 50px;
height: 40px;
background: #57ccfd;
opacity: 1;
position: absolute;
left: 500%;
top: 10%;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2::after {
content: "";
display: block;
width: 50px;
height: 40px;
background: #9b1308;
opacity: 1;
position: absolute;
left: 500%;
top: 114%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__rect-2 .shadow-2 {
background: #57ccfd;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: -10%;
left: 500%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__circle {
width: 220px;
height: 220px;
border-radius: 50%;
background: #fff;
position: absolute;
top: -15%;
left: 50%;
opacity: 0.9;
transform: scale(0);
transition: all 0.3s ease;
}
.card__collection .cards--three__circle:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #9b1308;
border-radius: 50%;
transform: scale(0);
transition: all 0.3s ease;
transition-delay: 0.2s;
}
.card__collection .cards--three__list {
list-style: none;
position: absolute;
top: -9px;
right: 7px;
padding-top: 60px;
transition: all 0.4s ease;
}
.card__collection .cards--three__list li {
display: inline-block;
margin: 4px;
color: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(87, 204, 253, 0.9);
text-align: center;
line-height: 1.7rem;
font-size: 12px;
transition: all 0.3s ease;
transform: translateX(500%);
}
.card__collection .cards--three__list li:nth-child(1) {
transition-delay: 0.2s;
}
.card__collection .cards--three__list li:nth-child(2) {
transition-delay: 0.3s;
}
.card__collection .cards--three__list li:nth-child(3) {
transition-delay: 0.4s;
}
<div class="card__collection clear-fix">
<div class="cards cards--two">
<img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80" class="img-responsive" alt="Cards Image">
<span class="cards--two__rect"></span>
<span class="cards--two__tri"></span>
<p>Lucy Grace</p>
<ul class="cards__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="cards cards--three">
<img src="https://images.unsplash.com/photo-1480408144303-d874c5e12201?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=575213599ae24b3dbdfd84be79425c50&auto=format&fit=crop&w=634&q=80" class="img-responsive" alt="">
<span class="cards--three__rect-1">
<span class="shadow-1"></span>
<p>Chris Levnon</p>
</span>
<span class="cards--three__rect-2">
<span class="shadow-2"></span>
</span>
<span class="cards--three__circle"></span>
<ul class="cards--three__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
I've added a LightBox correctly, but there's something wrong when I click a photo, because there's like a blue border in Google chrome and then another type of border in Internet Explorer that I don't want to see:
https://imgur.com/9dQngUM
How can I remove this?
I've used this lightbox https://lokeshdhakar.com/projects/lightbox2/
Thank you! :D
.lb-loader, .lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}
.lb-container > .nav {
left: 0
}
.lb-nav a {
outline: 0;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next, .lb-prev {
height: 100%;
cursor: pointer;
display: block
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-prev:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-next:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
.lb-data .lb-caption a {
color: #4ae
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: alpha(Opacity=100);
opacity: 1
}
Without seeing "the full picture" i.e. your code; you could try this:
.lightbox * { border: none !important; }
This assumes it really is a border problem and not some background image or something of that nature.
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;
}
I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!
You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.
https://jsfiddle.net/f962zL0h/
Hey!
I want to click on card1, so it will scale up etc. (that's working). But I also need, to animate card2 and card3. But when i do this:
.card1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0.5em;
margin-top: 200px;
transition: all .3s ease-in-out;
position: absolute;
}
.card2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0.5em;
margin-top: 200px;
transition: all .3s ease-in-out;
position: absolute;
margin-left: 340px;
}
.card3 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0.5em;
margin-top: 200px;
transition: all .3s ease-in-out;
position: absolute;
margin-left: 675px;
}
.card1:active {
margin: 0em;
width: 40%;
height: 100%;
position: fixed;
}
.card1:active + .card2 {
transform: scale(0) translatey(1000px);
opacity: 0;
}
.card1:active + .card3 {
transform: scale(0) translatey(1000px);
opacity: 0;
}
It is moving just with card2, not card3, but they've got same settings and everything.Thanks so much for any help guys!
It doesn't work with .card3 because .card1 is not directly followed by .card3.
Instead use ~ selector:
.card1:active ~ .card2{
transform: scale(0) translatey(1000px);
opacity: 0;
}
.card1:active ~ .card3{
transform: scale(0) translatey(1000px);
opacity: 0;
}
Updated JSFiddle.