I have a tricky problem which I have been unable to solve.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100% -ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
https://jsfiddle.net/6t04y9wo/6/
As you can see, the top-left navigation button is shown differently between Chrome and IE.
I tried to get everything work in percent units to avoid incompatibility with 4k monitors (or very different resolutions) or zooming (which is really hard to avoid on a touchscreen-monitor+ windows).
As far as I can see, the height of the buttonelement is measured really differently, and so the inner heights will be. I've tried many different settings for that, but I can't get it work and look good for both Chrome and Internet Explorer.
It seems that the margin here:
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
Is not correct, but I don't know how to fix it.
Maybe there is someone with some useful hints?
This would appear to be due to IE not calculating the height of the button correctly.
When using position: fixed; the position and dimensions of the element should be calculated in relation to the initial containing block:
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.
Fixed positioning (https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning)
It appears that IE is sizing the button in relation to the body. As you are using percentage height and no height has been specified on body this will result in the height for the button being set as auto. This can be overcome by adding height: 100%; to body so that the button's height can be calculated in relation to it.
The height of the bars in the button is set to 50% which with the padding will mean they exceed the height of the button. To overcome this you should set overflow: visible; on the button to allow them to be visible.
There is also a small typo that you will want to fix:
height: 100% -ms-content-zooming: none;
Should be:
height: 100%;
-ms-content-zooming: none;
You may also want to set a min-height and min-width to ensure the button shows when the viewport height is very small.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
height: 100%;
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Alternatively, you could use viewport units to specify the dimensions of the button.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 4vh;
height: 4vh;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Just use pixels, 4k displays are scaled, my uhd notebook shows exactly the same page when I'm looking at a page with a 1200px width body.
Related
I'm using a lightbox system on a page and I'm trying to get an image to go half inside the content of the lightbox and half above it - Like This
I've been editing some of the css to add z-index but that isnt helping.
Current HTML
<div class="nivo-lightbox-content"><div class="nivo-lightbox-inline" style="position: relative; top: 50%; margin-top: -281.95px;"><div id="s-b" style="" class="popuptxt">
<img src="https://example.com/b/wp-content/uploads/2022/05/s_b_popup.jpg" class="popupimg"><br>
<h3>SB</h3>
<h4>MD</h4>
<img loading="lazy" src="https://example.com/b/wp-content/uploads/2022/05/logo.png" width="65px" height="65px"><br>
Test Text<br>
all goes here.
</div></div></div><div class="nivo-lightbox-title-wrap"></div>
and CSS Code
.nivo-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 99998;
width: 100%;
height: 100%;
overflow: hidden;
visibility: hidden;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nivo-lightbox-overlay.nivo-lightbox-open {
visibility: visible;
opacity: 1;
}
.nivo-lightbox-wrap {
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
.nivo-lightbox-content {
width: 100%;
height: 100%;
}
.nivo-lightbox-title-wrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 99999;
text-align: center;
}
.nivo-lightbox-nav { display: none; }
.nivo-lightbox-prev {
position: absolute;
top: 50%;
left: 0;
}
.nivo-lightbox-next {
position: absolute;
top: 50%;
right: 0;
}
.nivo-lightbox-close {
position: absolute;
top: 2%;
right: 2%;
}
.nivo-lightbox-image { text-align: center; }
.nivo-lightbox-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.nivo-lightbox-content iframe {
width: 100%;
height: 100%;
}
.nivo-lightbox-inline,
.nivo-lightbox-ajax {
max-height: 100%;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* https://bugzilla.mozilla.org/show_bug.cgi?id=308801 */
}
.nivo-lightbox-error {
display: table;
text-align: center;
width: 100%;
height: 100%;
color: #fff;
text-shadow: 0 1px 1px #000;
}
.nivo-lightbox-error p {
display: table-cell;
vertical-align: middle;
}
/* Effects
**********************************************/
.nivo-lightbox-notouch .nivo-lightbox-effect-fade,
.nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
.nivo-lightbox-notouch .nivo-lightbox-effect-fall {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* fadeScale */
.nivo-lightbox-effect-fadeScale .nivo-lightbox-wrap {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
.nivo-lightbox-effect-fadeScale.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* slideLeft / slideRight / slideUp / slideDown */
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-ms-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap {
-webkit-transform: translateX(-10%);
-moz-transform: translateX(-10%);
-ms-transform: translateX(-10%);
transform: translateX(-10%);
}
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap {
-webkit-transform: translateX(10%);
-moz-transform: translateX(10%);
-ms-transform: translateX(10%);
transform: translateX(10%);
}
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
-webkit-transform: translateY(-10%);
-moz-transform: translateY(-10%);
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
}
.nivo-lightbox-effect-slideUp.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/* fall */
.nivo-lightbox-body-effect-fall .nivo-lightbox-effect-fall {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.nivo-lightbox-effect-fall .nivo-lightbox-wrap {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: translateZ(300px);
-moz-transform: translateZ(300px);
-ms-transform: translateZ(300px);
transform: translateZ(300px);
}
.nivo-lightbox-effect-fall.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
Any ideas what I'm missing?
I'm pretty sure it should just be a case of adding z-index to a couple of the classes but nothing seems to work - I just seem to be able to hide the image or move the image but not get it to display.
I would like to achieve the following effect: below CSS, on hover, does a "slot machine effect" that rolls the icon in a vertical carousel (please see the css below for details).
Due to restrictions of hosting that I am using for my website, I cannot use any external library of icons, so I would like to achieve the same effect, pasting the css into the header and using it with an img tag in HTML.
Could you please help me trim this css so that it will actually work with my image?
Thank you for all your forbearance and help.
-webkit-transition:all .3s;
-o-transition:all .3s;
transition:all .3s
}
.btn.social_share:hover .social-media-share-buttons-icon:before {
top: 40px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:hover .social-media-share-buttons-icon:after {
top: 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:active {
text-decoration: none!important;
-webkit-touch-callout: none
}
.btn.social_share:active .social-media-share-buttons-icon {
background-color: rgba(0, 0, 0, .2);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:active .social-media-share-buttons-icon:before {
top: 40px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:active .social-media-share-buttons-icon:after {
top: 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share.facebook .social-media-share-buttons-icon:after,
.btn.social_share.facebook .social-media-share-buttons-icon:before {
content: "\e63f"
}
.btn.social_share.linkedin .social-media-share-buttons-icon:after,
.btn.social_share.linkedin .social-media-share-buttons-icon:before {
content: "\e631"
}
.btn.social_share.twitter .social-media-share-buttons-icon:after,
.btn.social_share.twitter .social-media-share-buttons-icon:before {
content: "\e640"
}
#-moz-keyframes fadeBottom {
0% {
opacity: 0;
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%)
}
100% {
opacity: 1;
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%)
}
100% {
opacity: 1;
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#-o-keyframes fadeBottom {
0% {
opacity: 0;
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%)
}
100% {
opacity: 1;
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
As requested, also adding the HTML snippet, which currently is not working with above css:
<div style="padding: 30px 0; padding-left: 0px; margin-left: 0px; margin-right: 0px; text-align: center">
<div class="col-xs-12">
<ul class="social-media-share-buttons">
<li>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.mywebsite.com" class="btn btn-link social_share facebook" rel="nofollow" data-social_name="facebook" data-post_id="" data-social_type="share" data-location="inline">
<img class="social-media-share-buttons-icon" src="facebook_icon.png">
<div style="color: #fff; line-height: 2; font-weight: 700;">Facebook</div>
</a>
</li>
You don't need animations for that. Just use transitions and transforms and it works: Here some example:
ul {
text-align: center;
padding: 0;
}
li {
list-style-type: none;
}
a {
display: inline-block;
position: relative;
height: 40px;
background: #4456aa;
line-height: 40px;
overflow: hidden;
color: white;
text-decoration: none;
font-family: sans-serif;
border: 1px solid transparent;
transition: all 0.5s ease 0.5s;
}
a div {
padding: 0 30px;
}
a img {
transition: all ease 1s;
position: absolute;
top: 100%;
left: 0;
bottom: 0;
width: 30px;
margin: auto;
opacity: 0;
}
a:hover {
transition: all ease 0.5s;
}
a:hover {
background: #ffffff;
border: 1px solid #000000;
color: #000000;
}
a:hover img {
transition: all 0.5s ease 0.5s;
opacity: 1;
top: 0;
bottom: 0;
}
<ul class="social-media-share-buttons">
<li>
<a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https://www.mywebsite.com"
class="btn btn-link social_share facebook"
rel="nofollow"
data-social_name="facebook"
data-post_id=""
data-social_type="share"
data-location="inline">
<img class="social-media-share-buttons-icon"
src="https://image.flaticon.com/icons/png/128/20/20837.png">
<div>Facebook</div>
</a>
</li>
</ul>
You may use pre-built CSS properties like transforms and transitions, maybe they make you independent of animations.
I am trying to make this effect touch-friendly. I have a thumbnail gallery that has titles and descriptions. The title is displayed on load, and when the user hovers over the thumbnail they see the longer description. Then they can click on the entire image to go to the linked page.
I have tried several options, like this one but none seem to work. I'd be fine if the hover acted as a touch to display caption info, and a second touch will open the link that is assigned to the image. Right now, the first touch displays the description for a half second, then follows the link.
I'm open to CSS or js options- I just need to get something to work!
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
This is probably what you're looking for.
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 400px;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 700;
padding: 5px;
border: 2px solid #ffffff;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
<div class="hvrbox">
<img src="https://picsum.photos/5760/3840?image=1067" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top hvrbox-layer_slideup">
<div class="hvrbox-text">Take me to Goolge</div>
</div>
</div>
I want to make it so that I can have multiple buttons opening their own transition. As of now I have this code which works fine, however, if I repeat it or even change the css (class) to match an individual button, the primary button will still open the secondary transition and the newly placed secondary button remains inactive.
CSS
<style>
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #fff;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: absolute;
background: #fff;
overflow-y: visible;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: none;
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button 1 */
.menu-button {
position: absolute;
z-index: 1000;
margin: 1em;
padding: 0;
width: 10px;
height: 50px;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
opacity: 1;
top: 510px;
left: 855px;
-ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.2em;
bottom: 0.4em;
left: -1px;
background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
content: '';
}
.menu-button:hover {
opacity: 1;
}
/* Close Button */
.close-button {
width: 50px;
height: 50px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
opacity: 0;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Comments */
.menu-wrap {
position: absolute;
z-index: 1000;
width: 429.0500011444092px;
height: 600.875px;
right: 0;
background: #0C0C0C;
top: 6px;
padding: 0;
font-size: 1.15em;
-webkit-transform: translate3d(500px,0,0);
transform: translate3d(500px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}</style>
BEING TRANSITIONED
<div class="menu-wrap">
</div>
BUTTON
<button class="menu-button" id="open-button">Open Menu</button>
DEMO
DEMO
As you can see if you scroll towards the middle of the demo result window you will see the first button opening both transitions while the second button does nothing, I want the second button to open the bottom transition on its own.
Currently i am creating a website and i want to use the "new" css3 animations. It is hard to described what i've done, so i made a small example with the problem. When you hover with the mouse over the block the animation in firefox is very ugly. Furthermore the background image jitters 1px. The font gets blurry and the logo too. In IE11, Chrome its all working very fine :)
Here is the link: https://jsfiddle.net/0gk3fhnv/ or full code:
<ul id="parallelogram-box">
<li class="parallelogram">
<div class="text">Very nice descr Text! And here sec Row...</div>
<div class="logo"></div>
</li>
</ul>
.
body {
background: #eee;
}
#parallelogram-box {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-align: center;
}
#parallelogram-box li {
text-align: left;
position: relative;
list-style-type: none;
display: inline-block;
min-height: 400px;
min-width: 200px;
max-width: 200px;
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
margin: 20px;
overflow: hidden;
border-radius: 5%;
backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
bottom: 0px;
transition: bottom 0.2s ease-in 0s;
-webkit-transition: bottom 0.2s ease-in 0s;
-moz-transition: bottom 0.2s ease-in 0s;
-o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
background-position: -1000px -200px;
}
#parallelogram-box p {
font-size: 20px;
text-align: center;
}
#parallelogram-box li > * {
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
background: rgba(36,36,36,.9);
color: #e9e9e9;
position: absolute;
bottom: -75px;
height: 100px;
width: 180px;
z-index: 1;
font-size: 14pt;
margin-left: -12px;
text-align: center;
padding: 10px 25px 10px 25px;
transition: bottom 0.1s ease-in 0s;
-webkit-transition: bottom 0.1s ease-in 0s;
-moz-transition: bottom 0.1s ease-in 0s;
-o-transition: bottom 0.1s ease-in 0s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.logo {
position: absolute;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
}
.parallelogram .logo {
background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
background-size: contain;
background-position: 50% 50%;
}
Can you please tell me, whats causing this strange behavior? Is there a work around?
I've found a solution!
Look at https://jsfiddle.net/0gk3fhnv/5/
#-moz-document url-prefix() {
#parallelogram-box li:after {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: none !important;
}
li.parallelogram:after {
background-image: url(for_firefox_skewed_picure.png);
}
}
I changed the transition duration for firefox to 0.01 seconds and a linear animation to obscure the blurry text. Furthermore i added the css code above, which adds a exception for Firefox. The code removes the skew of the background image. So you have to add a custom background image for Firefox and skew it for your % in Photoshop or another photo editing software.