A want to put tree switch on my page. The switch are based on checkbox, and when I try to add more they stay one over the other. this is my code on fiddle: https://jsfiddle.net/kdh8zyo0/
All I want to do is add more two switch one above (not over) other. Like:
Switch 1
Switch 2
Switch 3
The full code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<style>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #179b77;
}
.colorful-switch {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 280px;
height: 120px;
margin-left: -140px;
margin-top: -60px;
border-radius: 50px;
background: #000000;
}
.colorful-switch:before {
content: "";
z-index: -1;
position: absolute;
left: -5px;
top: -5px;
width: 290px;
height: 130px;
border-radius: 55px;
/* COR DA BORDA */
background: #000000;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.colorful-switch:hover:before {
/* COR DA BORDA hover */
background: #13232f;
}
.colorful-switch__checkbox {
z-index: -10;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.colorful-switch__label {
z-index: 1;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50px;
cursor: pointer;
}
.colorful-switch__bg {
position: absolute;
left: 0;
top: 0;
width: 840px;
height: 100%;
/* background: -webkit-linear-gradient(0deg, #ffffff 0, #ffffff 280px, #ffffff 560px, #ffffff 100%);*/
background: linear-gradient(120deg, #179b77 0, #33FF99 280px, #FF3300 560px, #ff0000 100%);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: translate3d(-560px, 0, 0);
transform: translate3d(-560px, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.colorful-switch__dot {
position: absolute;
left: 204px;
top: 50%;
width: 8px;
height: 8px;
margin-left: -4px;
margin-top: -4px;
border-radius: 50%;
background: #fff;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {
-webkit-transform: translate3d(-125px, 0, 0);
transform: translate3d(-125px, 0, 0);
}
.colorful-switch__on {
position: absolute;
left: 177px;
top: 35px;
width: 30px;
height: 56px;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {
-webkit-transform: translate3d(-125px, 0, 0);
transform: translate3d(-125px, 0, 0);
}
.colorful-switch__on__inner {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(45deg) scale(0) translateZ(0);
transform: rotate(45deg) scale(0) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {
-webkit-transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
-webkit-transform: rotate(45deg) scale(1) translateZ(0);
transform: rotate(45deg) scale(1) translateZ(0);
}
.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {
content: "";
position: absolute;
border-radius: 4px;
background: #ffffff;
}
.colorful-switch__on__inner:before {
left: 0;
bottom: 0;
width: 100%;
height: 9px;
}
.colorful-switch__on__inner:after {
right: 0;
top: 0;
width: 9px;
height: 100%;
}
.colorful-switch__off {
position: absolute;
left: 204px;
top: 50%;
width: 64px;
height: 64px;
margin-left: -32px;
margin-top: -32px;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {
-webkit-transform: translate3d(-125px, 0, 0);
transform: translate3d(-125px, 0, 0);
}
.colorful-switch__off:before, .colorful-switch__off:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
border-radius: 4px;
background: #ffffff;
-webkit-transition: -webkit-transform 0.25s 0.25s;
transition: -webkit-transform 0.25s 0.25s;
transition: transform 0.25s 0.25s;
transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s;
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.colorful-switch__off:before {
-webkit-transform: rotate(45deg) scaleX(1) translateZ(0);
transform: rotate(45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {
-webkit-transform: rotate(45deg) scaleX(0) translateZ(0);
transform: rotate(45deg) scaleX(0) translateZ(0);
}
.colorful-switch__off:after {
-webkit-transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
-webkit-transform: rotate(-45deg) scaleX(1) translateZ(0);
transform: rotate(-45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transform: rotate(-45deg) scaleX(0) translateZ(0);
transform: rotate(-45deg) scaleX(0) translateZ(0);
}
</style>
<body> <font size="200px">Room</font>
<div class="colorful-switch" >
<input type="checkbox" style=" position: relative;
top: 20px;" class="colorful-switch__checkbox" id="cozinha"/>
<label class="colorful-switch__label" for="cozinha">
<span class="colorful-switch__bg" ></span>
<span class="colorful-switch__dot" ></span>
<span class="colorful-switch__on">
<span class="colorful-switch__on__inner" ></span>
</span>
<span class="colorful-switch__off"></span>
</label>
</div>
</body>
</html>
They stay on top of each other because the placement has been defined in the css. You would need to either remove the:
left: 50%;
top: 50%;
from .colorful-switch and define the values elsewhere or have a different css class for each button.
This would be an example of having seperate css for each buttons position: https://jsfiddle.net/d6LaLgLk/
or: https://jsfiddle.net/d6LaLgLk/1/ which uses px instead of %
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 have a button with arrows that is supposed to appear and move down when moused over. On Chrome and Firefox it works fine but when I open it up on Safari the arrows are too low- they aren't positioned correctly. I have heard about people specifying "top" and :left" but that doesn't seem to work for me. I don't know why this is but it seems to be due to the position: relative.
Code:
<a class="details" href="#scroll"> <span class="details__border--bottom">More Details</span>
</a>
<div class="top-portion__arrows">
<span class="top-portion__arrows--hide"></span>
<span class="top-portion__arrows--hide"></span>
<span class="top-portion__arrows--hide"></span>
</div>
a.details {
border: 2.5px solid white;
padding: 8px 62px;
padding-top: 11px;
font-family: 'Roboto', sans-serif;
font-size: 1.75rem;
background-color: rgba(214, 128, 0, 0.45);
color: white;
cursor: pointer;
position: relative;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
top: 5%;
z-index: 1;
display: inline-block;
}
a.details:hover,
a.details:focus {
background-color: rgba(231, 147, 21, 0.25);
-webkit-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
}
a.details:hover,
a.details:focus {
border: 3.5px solid white;
-webkit-transition: .15s;
-o-transition: .15s;
transition: .15s;
}
a.details:active {
background-color: rgba(247, 195, 100, 0.75);
-webkit-transition: .15s;
-o-transition: .15s;
transition: .15s;
}
.details__border--bottom {
display: inline-block;
padding: 2px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
.details__border--bottom:before {
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 2.5px solid white;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.25s ease-in-out;
-webkit-transition: -webkit-transform 0.45s ease-in-out;
transition: -webkit-transform 0.45s ease-in-out;
-o-transition: transform 0.45s ease-in-out;
transition: transform 0.45s ease-in-out;
transition: transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
}
a:hover .details__border--bottom:before,
a:focus .details__border--bottom:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.top-portion__arrows {
position: relative;
width: 0%;
top: 10%;
left: 51.5%;
}
.top-portion__arrows .top-portion__arrows--hide {
opacity: 0;
display: block;
width: 120px;
height: 120px;
border-bottom: 3px solid white;
border-right: 3px solid white;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin: -85px;
}
a.details:hover + .top-portion__arrows .top-portion__arrows--hide,
a.details:focus + .top-portion__arrows .top-portion__arrows--hide {
opacity: 1;
-webkit-animation: animate .65s ease;
animation: animate .65s ease;
}
.top-portion__arrows .top-portion__arrows--hide:hover .details__border--full,
.top-portion__arrows .top-portion__arrows--hide:focus .details__border--full {
border: 2.5px solid white;
-webkit-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
#-webkit-keyframes animate {
0%{
opacity: 0;
-webkit-transform: rotate(45deg) translate(-10px,-10px);
transform: rotate(45deg) translate(-10px,-10px);
}
50%{
opacity: .5;
}
100%{
opacity: 1;
-webkit-transform: rotate(45deg) translate(0px,0px);
transform: rotate(45deg) translate(0px,0px);
}
}
#keyframes animate {
0%{
opacity: 0;
-webkit-transform: rotate(45deg) translate(-10px,-10px);
transform: rotate(45deg) translate(-10px,-10px);
}
50%{
opacity: .5;
}
100%{
opacity: 1;
-webkit-transform: rotate(45deg) translate(0px,0px);
transform: rotate(45deg) translate(0px,0px);
}
}
You can detect whether a user is browsing on safari with some javascript and then if they are browsing on safari, style the buttons a certain way by changing the margin-left and margin-top. Here is the code to detect whether the user is on safari:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("chrome") // Chrome
} else {
alert("safari") // Safari
}
}
Edit: Your full code:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
} else {
document.getElementById("btn1").style.marginTop = "80%"; }
}
This menu in the middle of this page is working well, but on a Mac tablet (IOS system) it is giving this bug hover menu on Mac IOS. I suspect the problem to come from the "hover" function. Here is the html code :
.accueil2 {
text-align: center;
width: 70%;
}
.hover {
background-color: #fff;
}
.wrap {
position: relative;
width: 60vmin;
height: 60vmin;
margin: 0 auto;
top: -10vmin;
-webkit-transform: scale(0.2) translatez(0px);
transform: scale(0.2) translatez(0px);
opacity: 0;
-webkit-transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, -webkit-transform .5s;
transition: transform .5s, opacity .5s;
transition: transform .5s, opacity .5s, -webkit-transform .5s;
-webkit-perspective: 800;
perspective: 800;
}
.a1,
.a2,
.a3,
.a4,
.a5 {
position: absolute;
left: 0;
top: 0;
width: 47.5%;
height: 47.5%;
overflow: hidden;
-webkit-transform: scale(.5) translateZ(0px);
transform: scale(.5) translateZ(0px);
background: #585247;
}
a .div1,
a .div2,
a .div3,
a .div4 {
height: 100%;
background-size: cover;
opacity: .5;
-webkit-transition: opacity .5s;
transition: opacity .5s;
border-radius: inherit;
}
a:nth-child(1) {
/*lien haut gauche*/
border-radius: 40vmin 0 0 0;
-webkit-transform-origin: 110% 110%;
transform-origin: 110% 110%;
-webkit-transition: -webkit-transform .4s .15s;
transition: -webkit-transform .4s .15s;
transition: transform .4s .15s;
transition: transform .4s .15s, -webkit-transform .4s .15s;
}
a:nth-child(1) div {
/*haut gauche*/
background: #E3DFD2;
}
a:nth-child(2) {
/*lien haut droite*/
border-radius: 0 40vmin 0 0;
left: 52.5%;
-webkit-transform-origin: -10% 110%;
transform-origin: -10% 110%;
-webkit-transition: -webkit-transform .4s .2s;
transition: -webkit-transform .4s .2s;
transition: transform .4s .2s;
transition: transform .4s .2s, -webkit-transform .4s .2s;
}
a:nth-child(2) div {
background: #E3DFD2;
}
a:nth-child(3) {
/*lien en bas à gauche*/
border-radius: 0 0 0 40vmin;
top: 52.5%;
-webkit-transform-origin: 110% -10%;
transform-origin: 110% -10%;
-webkit-transition: -webkit-transform .4s .25s;
transition: -webkit-transform .4s .25s;
transition: transform .4s .25s;
transition: transform .4s .25s, -webkit-transform .4s .25s;
}
a:nth-child(3) div {
background: #E3DFD2;
}
a:nth-child(4) {
/*lien en bas à droite*/
border-radius: 0 0 40vmin 0;
top: 52.5%;
left: 52.5%;
-webkit-transform-origin: -10% -10%;
transform-origin: -10% -10%;
-webkit-transition: -webkit-transform .4s .3s;
transition: -webkit-transform .4s .3s;
transition: transform .4s .3s;
transition: transform .4s .3s, -webkit-transform .4s .3s;
}
a:nth-child(4) div {
background: #E3DFD2;
}
.a5 {
/*lien centre*/
position: absolute;
width: 55%;
height: 55%;
left: 22.5%;
top: 22.5%;
border-radius: 50vmin;
box-shadow: 0 0 0 5vmin #E3DFD2;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
}
#faceA {
position: absolute;
width: 55%;
height: 55%;
left: 22.5%;
top: 22.5%;
border-radius: 50%;
background: green;
}
#faceB {
position: absolute;
width: 55%;
height: 55%;
left: 22.5%;
top: 22.5%;
border-radius: 50%;
background: blue;
}
.a5.flipMe {
-webkit-transform: rotateY(180deg);
}
.spanout {
position: relative;
display: block;
margin: 0 auto;
top: 25vmin;
width: 10vmin;
height: 10vmin;
border-radius: 100%;
background: #585247;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.spanin {
position: absolute;
width: 60%;
height: 3px;
background: #ACA696;
left: 20%;
top: 50%;
border-radius: 0;
}
.spanin:after,
.spanin:before {
content: '';
position: absolute;
left: 0;
top: -1.5vmin;
width: 100%;
height: 100%;
background: inherit;
}
.spanin:after {
top: 1.5vmin;
}
.spanout:hover+.wrap,
.wrap:hover {
-webkit-transform: scale(.8) translateZ(0px);
transform: scale(.8) translateZ(0px);
opacity: 1;
}
.spanout:hover+.wrap a,
.wrap:hover a {
-webkit-transform: scale(1) translatez(0px);
transform: scale(1) translatez(0px);
}
a:hover div {
opacity: 1;
-webkit-transform: translatez(0px);
transform: translatez(0px);
}
<div class="accueil2">
<span class="spanout">
<span class="spanin">
</span>
</span>
<div class="wrap">
<a href="#" class="a1">
<div class="div1"></div>
</a>
<a href="#" class="a2">
<div class="div2"></div>
</a>
<a href="#" class="a3">
<div class="div3"></div>
</a>
<a href="#" class="a4">
<div class="div4"></div>
</a>
<div class="a5">
<div id="faceA">A</div>
<div id="faceB">B</div>
</div>
</div>
</div>
I was playing around with some CSS transitions, and trying to figure this out. I would like the text color to change (from left to right) INSTEAD of the background.
Here is the code: (codepen here: http://codepen.io/xkurohatox/pen/zGboMz)
HTML:
View Cart
CSS:
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
color: white;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
I already tried the obvious, such as changing background-color to color and playing around with translateZ. I don't think I've ever seen a css font color transition before so I would LOVE to see if anyone here is talented enough to come up with one.
Got the base code from here: https://github.com/IanLunn/Hover
Thank you in advance xx :)
It absolutely can be done using a little bit of trickery. Here's a working example that uses a mask to reveal the colored text.
Codepen: http://codepen.io/maxlaumeister/pen/eNXBaW
Live Demo:
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.mask {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0px;
overflow: hidden;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
text-shadow:
-1px -1px 0 red,
1px -1px 0 red,
-1px 1px 0 red,
1px 1px 0 red;
}
.mask a.added_to_cart.wc-forward {
color: red;
}
#container:hover .mask {
width: 500px;
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
body {
margin: 0;
}
a.added_to_cart.wc-forward.under {
position: absolute;
left: 0;
top: 0;
}
#inner {
width: 500px;
}
<div id="container">
View Cart
<div class="mask">
<div id="inner">
View Cart
</div>
</div>
</div>
I removed background color from a.added_to_cart.wc-forward:before
CSS
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
color: red;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
HTML
View Cart
Demo here
I have recently designed a site. But problem is in only Internet Explorer 8. Other browsers detect no problem. Problem is only on hover effect.
My style.css file:
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
#media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
#media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
#media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*stylesheet*/
body{
font-size:14px;
line-height:18px;
color:#fff;
background:#C9C6C5;
}
.wrapper {
}
/*header*/
.header_area {
background: url("../img/header_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.header_area:after {
background: url("../img/shadows.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
display: block;
height: 13px;
width: 100%;
}
.header {
margin: 0 auto;
overflow: hidden;
padding: 30px 0 40px;
width: 1000px;
}
.logo,.slogan{
float: left;
}
.logo img{width:260px;}
.main_slogan > img {
width: 350px;
margin-left: 32px;
}
.tel {
margin-left: 280px;
overflow: hidden;
}
.tel li {
background: #535353;
float: left;
margin-right: 10px;
padding: 5px 5px 5px 0;
}
.tel span {
background: none repeat scroll 0 0 #2b2b2b;
padding: 6px;
}
.social {float: right;
margin-top: 21px;}
.social li {
float: left;
}
.social li:hover {
opacity: .6;
filter: alpha(opacity=60);
}
.social li img {
width: 48px;
}
.header ul{
margin:0;
padding:0;
list-style:none;
}
/* menu */
.menu {
background: none repeat scroll 0 0 #2b2b2b;
margin: 0 auto;
min-height: 50px;
width: 1000px;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
z-index:9999;
}
.menu ul li {
background: none repeat scroll 0 0 #2b2b2b;
border-left: 1px solid #1b1a1a;
border-right: 1px solid #373636;
display: block;
float: left;
padding: 16px 15px;
text-transform: uppercase;
position:relative;
}
.menu ul li:first-child{border-left:0}
.menu ul li:last-child{border-right:0}
.menu ul li a {
color: #fff;
font-family: keron;
font-size: 13px;
line-height: 16px;
text-decoration: none;
}
.menu ul li:hover{background:#B70C0F; -webkit-transition: all .5s; transition: all .5s;}
/*dropdown menu*/
.menu ul ul,.menu ul ul ul{display:none;}
.menu ul li:hover>ul{display:block;}
.menu ul ul{
left: 0;
position: absolute;
top: 50px;
width: 170px;
}
.menu ul ul li{float:none;
border-left: 0px solid #1b1a1a;
border-right: 0px solid #373636;
border-top: 1px solid #1b1a1a;
border-bottom: 1px solid #373636;
position:relative;
}
.menu ul ul li:first-child{border-top:0}
.menu ul ul li:last-child{border-bottom:0}
.menu ul ul li:hover ul{display:block}
.menu ul ul ul{
left: 170px;
position: absolute;
top: 0;
}
.content_box_area{background:#C9C6C5;}
.content_area {
overflow: hidden;
margin: 0 auto;
width: 1000px;
}
.image_box {
overflow: hidden;
}
.image_box {
overflow: hidden;
padding: 45px 0 0;
}
/*another source*/
.view {
margin: 10px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.view img {
display: block;
position: relative;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view-fifth img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #333;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-fifth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.view-seventh h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh p {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-seventh:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view-seventh:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
#keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
#-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
#-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/*end*/
.box {
overflow: hidden;
margin: 3px;
}
.box img {
height: 100%;
width: 100%;
}
.box_part_one {
float: left;
overflow: hidden;
width: 450px;
}
.box.box1 {
float: left;
height: 255px;
width: 192px;
}
.box.box2 {
float: left;
height: 130px;
width: 120px;
}
.box.box3 {
float: right;
height: 130px;
width: 120px;
}
.box.box4,.box.box5 {
float: left;
height: 120px;
width: 120px;
}
.box.box5 {position:relative;
overflow:hidden;}
.comment_heading{
background-color: rgba(0, 0, 0, 0.75);
border-radius: 5px;
box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.75);
display: none;
font-size: 15px;
height: 100%;
left: 0;
padding: 25px;
position: absolute;
top: 0;
width: 100%;
}
.box.box5:hover .comment_heading{display:block;}
.box_part_two {
float: right;
width: 550px;
}
.box.box6 {
float: left;
height: 255px;
width: 190px;
}
.box.box7 {
float: left;
height: 120px;
width: 216px;
}
.box.box8 {
float: left;
height: 120px;
width: 126px;
}
.box.box9 {
float: left;
height: 130px;
width: 123px;
}
.box.box10 {
float: right;
height: 130px;
width: 219px;
}
.box.box2:hover img,.box.box9:hover img{
-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box3:hover img{
-webkit-transform: scale(1.4); -webkit-transform-style: preserve-3d; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box4:hover img{
-webkit-transform: scale(.8); -webkit-transform-style: preserve-3d; -webkit-transform: scale(.8); transform: scale(.8); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box6:hover img{
-webkit-transform: scale(1.4); -webkit-transform-style: preserve-3d; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box2, .box.box2:hover img,.box.box3:hover img,.box.box4:hover img,.box.box9:hover img,.box.box5:hover .comment_heading {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
my link:
http://www.mytechbd.com/demo-content
How many of your site visitors do you expect to be using IE8?
google, Facebook and a few other high volume website are only supporting the last 3 versions of vendor's browsers and redirect IE8 users to update their webbrowser version...
To provide backward compatibility for the :hover pseudoclass for IE8 you need to use a 'shim' like jquery plugins.
web search or hover shim for IE8
or provide a fallback using the onmouseover event handlers instead of the :hover pseudoclass.
hover shim for IE8 and lower