I have code that works perfectly fine on Chrome, Opera and Safari but not on Mozilla. I have included a working fiddle to visualize the problem. I have tried changing the size, changing the angle of rotation, visibility, etc., and still I have not been able to solve the problem.
Html :
<section class='in-circle'>
<div class='card onhover'>
<div class='front'>
<label id='image'></label>
</div>
<div class='back'>
<a href='./lessons.php'>Schedules</a>
</div>
</div>
</section>
CSS:
.in-circle{
width: 125px;
height: 125px;
display: table;
position: relative;
border: 2px solid #FFFFFF;
font-family: 'Handlee', cursive;
-webkit-border-radius: 100% 100%;
-moz-border-radius: 100% 100%;
border-radius: 100% 100%;
-webkit-transition: opacity 1.75s ease-in-out;
-moz-transition: opacity 1.75s ease-in-out;
-ms-transition: opacity 1.75s ease-in-out;
-o-transition: opacity 1.75s ease-in-out;
transition: opacity 1.75s ease-in-out;
}
.card {
-webkit-perspective: 800;
perspective: 800;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.onhover:hover{
-webkit-transform: rotateY(-540deg);
-moz-transform: rotateY(-540deg);
transform: rotateY(-540deg);
}
.card.onclick{
-webkit-transform: rotateY(-540deg);
-moz-transform: rotateY(-540deg);
transform: rotateY(-540deg);
}
.card .front {
width: inherit;
height: inherit;
cursor: pointer;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.card .back {
width: inherit;
height: inherit;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateY(-540deg);
transform: rotateY(-540deg);
}
.in-circle > .card{
width: inherit;
height: inherit;
display: block;
position: relative;
}
.in-circle > .card > .front,
.in-circle > .card > .back{
display: table;
text-align: center;
-webkit-border-radius: 100% 100%;
-moz-border-radius: 100% 100%;
border-radius: 100% 100%;
background: rgba(255, 255, 255, 0.5);
}
.in-circle > .card > .front > *,
.in-circle > .card > .back > *{
display: table-cell;
vertical-align: middle;
}
.in-circle > .card > .back > a{
color: #FF0000;
}
.in-circle > .card > .front #image{
background-image: url('http://s30.postimg.org/4o23rf7bx/camera.png');
}
http://jsfiddle.net/gacci/mvct15gh/
Backface-visibility doesnt work properly in Mozilla.
Try to add this code in your css (it works for me):
.card {
backface-visibility: hidden;
}
With this, you are adding the backface-visibilityin the container too.
Ref: Backface-Visibility Not Working Properly in Firefox (Works in Safari)
Related
I want to make a hover effect, when hover the image like this:
On the Internet found many similar examples but they all either with jquery or js. I would like to know whether it is possible to do purely with css...
UPDATE: here's a code found, but it is too big :(
.view-content {
height: 330px;
}
h2.view-title {
font-size: 3rem;
font-weight: bold;
color: #7d7a7a;
text-align: center;
text-shadow: 0 0px 0px;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .view-mask, .view {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.view-info {
display: inline-block;
text-decoration: none;
padding:0;
text-align: center;
color: white;
font-size: 1.9rem;
font-weight: 600;
vertical-align: middle;
}
.view-effect .view-mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.3s ease-in-out;
}
.view-effect a.view-info {
position:relative;
top:-20px;
opacity: 0;
transition: opacity 0.3s 0s ease-in-out;
}
.view-effect:hover .view-mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.view-effect:hover a.view-info {
opacity:1;
transition-delay: 0.3s;
}
<div class="view view-effect">
<img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt=""> <p></p>
<div class="view-mask">
Show project
</div>
</div>
Checkout below code as what you want or just click on below link :-
https://jsfiddle.net/ananddeepsingh/99bop25r/
HTML
<div class="box"> <img src="http://placehold.it/400x300">
<div class="overbox">
<div class="title overtext"> CSS Script </div>
<div class="tagline overtext"> Animated Text Overlay On Hover </div>
</div>
</div>
CSS
.box {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: #304562;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 360px;
height: 240px;
padding: 130px 20px;
}
.box:hover .overbox {
opacity: 1;
}
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
Yes you can do that using pure CSS. for that purpose you may use :after pseudo class as,
.img-wrapper {
position:relative;
display:inline-block;
overflow:hidden;
cursor:pointer
}
.img-wrapper .hover-div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity:0;
display:inline-block;
text-align:center;
background:rgba(0,0,0,0.3);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.img-wrapper:hover .hover-div{
top:0;
opacity:1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.img-wrapper:hover img {
-webkit-filter:grayscale(1);
-moz-filter:grayscale(1);
filter:grayscale(1);
}
.mybutton{
background:#FFFFFF;
color:#111111;
padding:10px 20px;
border-radius:5px;
display:inline-block;
margin-top:100px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.mybutton:hover{
background:#111111;
color:#FFFFFF;
}
<div class="img-wrapper">
<img src="https://unsplash.it/200" >
<div class="hover-div">
<a class="mybutton">My Button</a>
</div>
</div>
Just use ':hover' after the element you want to show the effect on. For example, if you wanted to use it on the header you would create a new css tag called
header:hover{} and then you could put an opactiy of maybe 0.5 to make the object fade on hover. Hope this helps!
Yes it is possible only through HTML and CSS. Below there is an example code:
HTML:
<div class="imagebox">
<div class="transparent"><i class="fa fa-search" aria-hidden="true"></i>
<p>Zoom</p></div>
<img src="images/yourimage.jpg">
</div>
CSS:
.imagebox{
position: relative;
}
.imagebox:hover .transparent{
display: block;
}
.transparent{
background: rgba(0,0,0,0.5);
position: absolute;
height: 100%;
width: 100%;
display: none;
cursor: pointer;
}
.transparent i{
position: absolute;
left: 50%;
top: 30%;
color: #fff;
font-size: 20px;
}
.transparent p{
position: absolute;
left: 45%;
top: 50%;
color: #fff;
font-size: 20px;
}
I am new with CSS3 animation. Currently, I'm trying to move the image in an element by 40px to left when the container is hovered, but every time the image is hovered it will give an empty space to the right side of the container. I have tried to give the image a bigger width to ensure it not giving any empty space when being hovered, but it doesn't work.
I'm not really sure how to word it, so I put a screenshot here. The red arrow shows the empty space left when the container is hovered.
Screenshot of the said problem
This is the HTML and CSS code of the said element:
HTML:
<ul>
<li class="opinion card wrapper">
<div id="card" class="opinion card container">
<div class="opinion card image variation-3">
</div>
<div class="opinion card text variation-3">
<a href="">
<h2 class="opinion card headline">
<span class="highlight">Contoh judul pendek yang agak panjang tapi panjang</span>
</h2>
</a>
<a href="/author" class="opinion card author link">
<span class="highlight noTransition">Author Name</span>
</a>
<a href="/author" class="opinion card date link">
<span class="highlight noTransition">Publication Date</span>
</a>
<p class="opinion card description">
Indoor air pollution gets surprisingly little attention for such a lethal public health problem. It kills more people each year than HIV/AIDS and malaria combined, but few countries treat it as a crisis on the same level.
</p>
</div>
</div>
</li>
</ul>
CSS
.opinion.card.wrapper {
position: relative;
display: inline-block;
float: left;
width: 25%;
margin:0;
padding: 0;
overflow: hidden;
color: white;
box-sizing: border-box;
background: transparent;
}
.card.wrapper {
height: 618px;
}
.opinion.card.container {
overflow: hidden;
height: inherit;
display: block;
margin: 15px;
position: relative;
}
.opinion.card.article.link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: 3;
}
.opinion.card.author.link {
z-index: 1;
}
.opinion.card.image {
background: url("https://i.imgur.com/SvO0n5b.jpg") no-repeat;
background-position: center, center;
background-size: cover;
display: block;
height: inherit;
overflow: hidden;
position: absolute;
top: 0;
width: 150%;
cursor: pointer;
}
.opinion.card.image.variation-3 {
background-image: url("https://i.imgur.com/SvO0n5b.jpg");
position: relative;
float: left;
overflow: hidden;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
max-width: none;
width: 100%;
height: -webkit-calc(100% + 50px);
height: calc(100% + 50px);
-webkit-filter: contrast(1.05) brightness(1.1);
filter: contrast(1.05) brightness(1.1);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;/*
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;*/
}
.opinion.card.image.variation-2:before,
.opinion.card.image.variation-3:before {
content: "";
position: absolute;
height: 150%;
top:-200;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
overflow:hidden;
}
.opinion.card.image.variation-3:before {
background-color: rgba(0,0,0,0.3);
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.opinion.card.text {
float: left;
text-align: left;
margin: 30px 30px 45px 30px;
position: absolute;
bottom: 0;
left: 0;
}
.opinion.card.text.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.opinion.card.headline {
font-family: "Patua One", "Georgia", serif;
font-size: 40px;
font-size: 2.2222rem;
color: #fff;
margin-bottom: 10px;
position: relative;
}
.opinion.card.author,
.opinion.card.date {
font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
font-size: 18px;
font-size: 1rem;
color: #505eea;
position: relative;
}
.opinion.card.description {
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
font-size: 0.8889rem;
font-style: italic;
color: #f1f1f1;
width: 90%;
margin-top: 30px;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.opinion.card.description:before {
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 5px;
background: #fff;
content: "";
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.opinion.card .highlight {
background-color: #000;
padding: 5px;
}
.opinion.card.container:hover .opinion.card.image {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.opinion.card.container:hover .opinion.card.image.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
width: 100%;
}
.opinion.card.container:hover .opinion.card.image.variation-2:before {
opacity: 1;
/*background-color: rgba(0,0,0,0.2);*/
background-image: url(img/pattern_2.png);
}
.opinion.card.container:hover .opinion.card.image.variation-3:before,
.opinion.card.container:hover .opinion.card.container:after {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.opinion.card.container:hover .opinion.card.container:after,
.opinion.card.container:hover .opinion.card.description:before, {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.opinion.card.container:hover .opinion.card.text.variation-3,
.opinion.card.container:hover .opinion.card.description:before {
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.opinion.card.container:hover .opinion.card.description,
.opinion.card.container:hover .opinion.card.container:after {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.opinion.card.container:hover .opinion.card.container:after {
width: 100%;
height: 100%;
}
.opinion.card.container:hover .opinion.card.headline {
color: #505eea;
transition: 0.3s ease-in-out;
}
.opinion.card.container:hover .opinion.card.author {
transition: color 0s;
}
a.opinion.card.author:hover {
color: #fff;
transition: all 0.3s ease-in-out;
}
#media (min-width: 1280px) {
.home.container {
margin: auto;
max-width: 1200px;
}
.card.wrapper {
height: 618px;
}
.opinion.card.wrapper {
display: inline-block;
width: 33.3333333%;
min-width: 33.3333333%;
}
.opinion.card.wrapper:first-child {
width: 66.66666666666%;
}
}
JSFiddle: https://jsfiddle.net/fatzjuhe/1/
I don't own the image used here, I just took a random picture from Imgur for better viewing.
Any help will be very much appreciated. Thank you!
I have solved my own problem. Basically, I messed up with the max-width and min-width properties in the .variation-3 class. I also defined the width property of the hovered image (should be inherited from the image state before being hovered ). It works perfectly now.
.opinion.card.image.variation-3 {
background-image: url("https://i.imgur.com/SvO0n5b.jpg");
float: left;
overflow: hidden;
display: block;
width: 120%;
-webkit-filter: contrast(1.05) brightness(1.1);
filter: contrast(1.05) brightness(1.1);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.opinion.card.container:hover .opinion.card.image.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
}
Thank you!
JSFIDDLE: https://jsfiddle.net/fatzjuhe/2/
I have a code to make flip to a div. It's working fine in Firefox and Chrome, but in IE when the card flips, it shows the front side upside down instead of show the back side.
This is the code:
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateX( 180deg ) ;
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.back {
background: #03446A;
color: white;
transform: rotateX( 180deg );
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
As Shaggy commented, IE doesn't support preserve-3d. It also lacks support for backface-visibility: hidden;
So,you can not rotate the container, you have to rotate the elements individually.
And you need to adjust the visibility (with half the transition time, you want it to happen in the middle of the rotation.
This is the result, working ok on modern browsers and also on IE
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transition: visibility 0.5s, transform 1s;
}
.card:hover .front {
visibility: hidden;
transform: rotateX(180deg);
}
.back {
background: #03446A;
color: white;
transform: rotateX( -180deg );
transition: visibility 0.5s, transform 1s;
}
.card:hover .back {
transform: rotateX(0deg);
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
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.
I am using a button I found on the internet but I cannot manage to work this out:
The button has a hover effect that brings down an image, the only way I can get it to show an image instead of text is with the attribute.
.icon-cart:before {
content: url("http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif");
}
Is there a way to either style this image or replace it with a standard img or div?
Here is the JS-Fiddle
Check this working fiddle.
HTML
<button class="btn btn-5 btn-5a icon-cart"><span class='fbtext'>Facebook</span><img class='fbimage' src='http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif'/></button>
CSS
.btn {
border: none;
font-family: Arial;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Button 5 */
.btn-5 {
background: #000;
color: #fff;
position:relative;
height: 70px;
min-width: 260px;
line-height: 24px;
font-size: 16px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5 .fbimage{
position:absolute;
left:50%;
bottom:100%;
margin-left:-8px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:hover .fbimage{
bottom:50%;
margin-bottom:-8px;
}
.btn-5:active {
background: #0F0F0F;
}
.btn-5 span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}