This is the original version of the 3D book effect.
https://jsfiddle.net/7asrgok4/
When I try to make this 3D effect to show when I mouse hover, it is not working with all layers.
.featured-image-container {
display: inline-block;
box-shadow: 5px 5px 20px #333;
margin: 10px;
}
.featured-image-container img { vertical-align: middle; }
/*
* In order for this to work, you must use Modernizer
* to detect 3D transform browser support. This will add
* a "csstransforms3d" class to the HTML element.
*
* Visit http://modernizr.com/ for installation instructions
*/
.csstransforms3d .bg-book {
-moz-perspective: 100px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
cursor: pointer;
}
.csstransforms3d .featured-image-container:hover {
position: relative;
-moz-perspective: 100px;
-moz-transform: rotateY(-3deg);
-webkit-transform: perspective(100) rotateY(-3deg);
outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
box-shadow: none;
margin-right: 50px;
cursor: pointer;
}
.csstransforms3d .featured-image-container img {
position: relative;
max-width: 100%;
height:196px;
}
.csstransforms3d .featured-image-container:before,
.csstransforms3d .featured-image-container:after {
position: absolute;
top: 2%;
height: 96%;
content: ' ';
z-index: -1;
}
.csstransforms3d .featured-image-container:before {
width: 100%;
left: 7.5%;
background-color: #0a0502;
box-shadow: 5px 5px 20px #333;
}
.csstransforms3d .featured-image-container:after {
width: 5%;
left: 100%;
background-color: #EFEFEF;
box-shadow: inset 0px 0px 5px #aaa;
-moz-transform: rotateY(20deg);
-webkit-transform: perspective(100) rotateY(20deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
</div>
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
</div>
</div>
The problem is you should only add a :hover style, not replace with one.
.featured-image-container {
display: inline-block;
box-shadow: 5px 5px 20px #333;
margin: 10px;
}
.featured-image-container img {
vertical-align: middle;
}
/*
* In order for this to work, you must use Modernizer
* to detect 3D transform browser support. This will add
* a "csstransforms3d" class to the HTML element.
*
* Visit http://modernizr.com/ for installation instructions
*/
.csstransforms3d .bg-book {
-moz-perspective: 100px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
cursor: pointer;
}
.csstransforms3d .featured-image-container {
position: relative;
outline: 1px solid transparent;
/* Helps smooth jagged edges in Firefox */
box-shadow: none;
margin-right: 50px;
cursor: pointer;
}
.csstransforms3d .featured-image-container img {
position: relative;
max-width: 100%;
height: 196px;
-moz-perspective: 100px;
-moz-transform: rotateY(-1deg);
-webkit-transform: perspective(100) rotateY(-1deg);
outline: 1px solid transparent;
/* Helps smooth jagged edges in Firefox */
transition: 0.2s;
}
.csstransforms3d .featured-image-container:hover img {
-moz-perspective: 100px;
-moz-transform: rotateY(-5deg);
-webkit-transform: perspective(100) rotateY(-5deg);
}
.csstransforms3d .featured-image-container:before,
.csstransforms3d .featured-image-container:after {
position: absolute;
top: 2%;
height: 96%;
content: ' ';
z-index: -1;
}
.csstransforms3d .featured-image-container:before {
-moz-perspective: 100px;
-moz-transform: rotateY(-1deg);
-webkit-transform: perspective(100) rotateY(-1deg);
width: 100%;
left: 2.5%;
background-color: #0a0502;
box-shadow: 2px 2px 20px #333;
transition: 0.2s;
}
.csstransforms3d .featured-image-container:hover:before {
-moz-transform: rotateY(-5deg);
-webkit-transform: perspective(100) rotateY(-5deg);
left: 7.5%;
box-shadow: 5px 5px 20px #333;
}
.csstransforms3d .featured-image-container:after {
width: 1%;
left: 100%;
background-color: #EFEFEF;
box-shadow: inset 0px 0px 5px #aaa;
-moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
-webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(0);
transition: 0.2s;
}
.csstransforms3d .featured-image-container:hover:after {
width: 5%;
-moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
-webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(3px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
</div>
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
</div>
</div>
Are you using an onmouseover event in your div? You can make it trigger a javascript function that changes the div's class. Here is a W3 article on the onmouseover event: https://www.w3schools.com/jsref/event_onmouseover.asp
Related
I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
I am trying to create this button in html with a little animation as below.
How can I make the below polygon shape in css, and how to move it to a regular rectangle in animation on hover?
This is what I am trying to make it look like:
And here is how it should look like on hover:
Thanks for any help
A bit messy, but it is what I get so far:
body {
background-color: #FFB504;
}
.cta {
color: white;
border: none;
width: 240px;
height: 80px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: sans-serif;
cursor: pointer;
position:relative;
background-color: transparent;
outline: none;
}
.cta-content {
padding-right: 20px;
transition: all .3s ease;
z-index:1;
}
.cta:before {
clip-path: polygon(10px 10px, 230px 10px, 190px 70px, 10px 70px);
transition: all .3s ease;
will-change: clip-path;
background-color: #0081B1;
}
.cta-border, .cta-border:before, .cta-border:after, .cta:before {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .3s ease;
}
.cta-border{
overflow: hidden;
}
.cta-border:before {
clip-path: polygon(0px 0px, 220px 0px, 170px 80px, 0px 80px);
border: 2px solid white;
}
.cta-border:after {
transform-origin: center center;
transform: translate(-28px, -69px) rotate(32deg);
border-right: 2px solid white;
height: 94.34px;
}
.cta:hover .cta-content {
padding-right: 0;
}
.cta:hover:before, .cta:hover .cta-border:before {
clip-path: polygon( 0px 0px, 240px 0px, 240px 80px, 0px 80px);
}
.cta:hover .cta-border:after {
transform: translate(0,0) rotate(0);
}
<button class="cta">
<span class="cta-content">HIRE ME</span>
<span class="cta-border"></span>
</button>
I'm having a bit of brain block here and can't seem to figure this one out at the moment.
I have four flip-cards that flip down vertically on hover, currently. What I'm trying to achieve here is have the flip-cards flip down on page load, one at a time after the other, with no hover, and then once the fourth card has flipped down, reset all, and loop the same set of transitions over again, infinitely.
I'm sure it's some crystal clear answer that my brain is just not comprehending at the moment. I've tinkered around with it so much that I've just reset it back to hover.
P.S. sorry for the CSS mess I kinda let it go in my many attempts to find a solution. Any help is much appreciated!!
Here's the HTML:
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
</div>
<div class="flip-card-back1">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
</div>
<div class="flip-card-back2">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card3">
<div class="flip-card-inner3">
<div class="flip-card-front3">
</div>
<div class="flip-card-back3">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card4">
<div class="flip-card-inner4">
<div class="flip-card-front4">
</div>
<div class="flip-card-back4">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
And here's the CSS:
.flip-card1 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card1:hover .flip-card-inner1 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front1, .flip-card-back1 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back1 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
.flip-card2 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card2:hover .flip-card-inner2 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back2 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner3 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card3:hover .flip-card-inner3 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front3, .flip-card-back3 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front3 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back3 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
.flip-card4 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner4 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card4:hover .flip-card-inner4 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front4, .flip-card-back4 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front4 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back4 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
Here it is in jsfiddle
use setInterval to add class for animation in sequnce and use jquery delay method to remove the same class after time.
use below code snippet for same logic.
NOTE : removed all hover selectors.
$(document).ready(function(){
var i = 0;
setInterval(function(){
$(".flip-card-inner"+ i).addClass("hoverit").delay( 1000 - (i*20) ).queue(function(){
$(this).removeClass("hoverit").dequeue();
});
if(i == 4) {
i = 0;
}
i++;
}, 1000);
});
.hoverit {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card1 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card-front1, .flip-card-back1 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back1 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD2 ANIMATION*/
.flip-card2 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card2:hover .flip-card-inner2 {
transform: rotatex(-180deg);
perspective: 1000px;
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back2 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner3 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card-front3, .flip-card-back3 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front3 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back3 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
/*FLIP-CARD4 ANIMATION*/
.flip-card4 {
background-color: transparent;
width: 60%;
height: 150px;
margin-left: 75px;
perspective: 1000px;
}
.flip-card-inner4 {
position: relative;
border-radius: 10px;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform-origin: bottom;
}
.flip-card-front4, .flip-card-back4 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front4 {
background-color: transparent;
color: black;
z-index: 2;
border-radius: 10px;
}
.flip-card-back4 {
background-color: #2980b9;
color: white;
border-radius: 10px;
transform: rotatex(-180deg);
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
</div>
<div class="flip-card-back1">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
</div>
<div class="flip-card-back2">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card3">
<div class="flip-card-inner3">
<div class="flip-card-front3">
</div>
<div class="flip-card-back3">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
<div class="flip-card4">
<div class="flip-card-inner4">
<div class="flip-card-front4">
</div>
<div class="flip-card-back4">
<h1>Test</h1>
<p>This is a test</p>
</div>
</div>
</div>
Are you trying to do this with just CSS? If so you could use keyframes to create the 'auto-flip' effect. Here's the updated fiddle, it seems to break the hover state. If you also need the hover state you may need to use JS. Which I can help with as well. Edit: In the fiddle I change the transition origin to center. I just thought it looked better with the animation.
#keyframes flip {
0% {
transform: rotatex(0deg)
}
25% {
transform: rotatex(-180deg)
}
50% {
transform: rotatex(0deg)
}
100% {
transform: rotatex(0deg)
}
}
I'm working on this page:
http://doitanyway.dk/intelligentsystems/en/homeuk/
Just below slider there's 6 images with some layered hover effects. Everything is working like a charm in Safari, Chrome and Opera - but not in Firefox (and Tor).
It seems to be the "a href" wrap round the img class that is the problem. It is not working in my mac Firefox 52.0. Anybody know a workaround...?
Here's the code for the first of the images:
HTML
<div class="width: 130px">
<div class="hovereffect">
<a href="http://doitanyway.dk/intelligentsystems/en/healthcare/">
<img class="img-responsive" src="http://doitanyway.dk/intelligentsystems/wp-content/uploads/2017/03/submenu_front1.png" alt="">
</a>
<div class="overlay">
<h2>Healthcare</h2>
<p>
See our solutions
</p>
</div>
</div>
</div>
CSS
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000000;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect .overlay {
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 129px 10px;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect img {
display: block;
position: relative;
-webkit-filter: sepia(50%); /* Safari */
filter: sepia(50%);
max-width: none;
/* width: calc(100% + 20px); */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.7s, transform 0.7s;
/* -webkit-transform: translate3d(-10px,0,0); */
/* transform: translate3d(-10px,0,0); */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect:hover img {
pointer-events: none;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect h2 {
/* text-transform: uppercase; */
color: #fff;
text-align: center;
position: relative;
font-size: 11px;
overflow: hidden;
padding: 0.5em 0;
background: rgba(0, 0, 0, 0.6);
border-radius: 8px;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.hovereffect:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
text-shadow: none;
background: rgba(0, 0, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
font-size: 10px;
}
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1 !important;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
font-size: 10px;
}
Delete the following css rule.
.hovereffect a, .hovereffect p {opacity:0}
Which Firefox version is it not working on? It is working on FF 51 for me.
Those attributes might not be supported or, you might need to add an additional -moz- rule to all of your transforms.
Check support here: http://caniuse.com/#search=transform
I have a div content section .white-back is a slider.
I want to show it on two tags.
I tried to use:
.white-back{
display: flex;
object-fit: center;
align-items: center;
}
but it does not display on the screen.
It should look like:
The slider .white-back on the center of the screen.
div.form and div.invite is background of slider.
See my code at here:
$(".close, .nope").on('click', function () {
$('.modal').addClass('hidden');
$('.open').addClass('active');
})
$(".open").on('click', function () {
$(this).removeClass('active');
$('.modal').removeClass('hidden');
})
$('.quotes').slick({
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 6000,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
});
$( document ).ready(function() {
$('.no-fouc').removeClass('no-fouc');
});
*, :before, :after {
box-sizing: border-box;
margin: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body {
overflow: hidden;
}
.popup {
color: #FFF;
font-family: Roboto;
}
.modal {
height: 450px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .4s, box-shadow .3s .4s;
transition: .4s, box-shadow .3s .4s;
}
.modal.hidden {
box-shadow: none;
-webkit-transition: .4s, box-shadow 0s;
transition: .4s, box-shadow 0s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.modal.hidden .form {
top: 100%;
}
.modal.hidden .invite {
top: -100%;
}
.modal.hidden .invite .close {
height: 0;
width: 0;
top: 0;
right: 0;
}
.wrap-parent {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 500px #7a7a7a inset;
-webkit-text-fill-color: #FFF;
}
label {
font: 500 14px Roboto;
color: #ffb66e;
}
button {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
button:hover:before {
left: 110%;
-webkit-transition: .3s;
transition: .3s;
}
button:before {
content: '';
background: rgba(255, 255, 255, 0.3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transition: 0s;
transition: 0s;
}
h2 {
font: 30px Roboto;
text-transform: uppercase;
}
.close {
background: #474747;
height: 30px;
width: 30px;
border: 3px solid #FFF;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
-webkit-transition: .4s .3s;
transition: .4s .3s;
}
.close:before, .close:after {
content: '';
background: #FFF;
height: 80%;
width: 3px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.open {
color: black;
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.open.active {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
.form {
background: red;
padding: 440px 0;
-webkit-transform: skew(0deg, -20deg);
transform: skew(0deg, -20deg);
margin-top: -250px;
padding-top: 140px !important;
}
.invite {
background: black;
padding-top: 300px;
transform: skew(0deg, -20deg);
padding-bottom: 280px;
}
/*.form form {
-webkit-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
text-align: center;
}
.invite .content {
-webkit-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
text-align: center;
}*/
/* Simple Slider */
.white-back{
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background: #fff;
display: flex;
object-fit: center;
align-items: center;
}
.simple blockquote p {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #1e528e;
padding: 25px;
font-size: 1.25em;
font-style: italic;
text-align: center;
}
.simple cite {
font-size: 1em;
float: right;
font-style: normal;
color: #1e528e;
}
.simple cite a {
color: #2d91c2;
font-style: italic;
text-decoration: none;
font-size:.85em;
}
.simple cite a:hover {
color: #00B4CC;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daily UI #001 - Sign Up Modal</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
</head>
<body>
<div class="popup">
<a class="open active" title="open modal" href="#">Open Modal</a>
<div class="modal hidden wrap-parent">
<div class="form">
</div>
<div class="invite">
</div>
<!-- Simplest Slider -->
<section role="complementary" class="simple white-back quotes no-fouc">
<blockquote>
<p><strong>to cite (verb)</strong>: to acknowledge (give credit to) the original author or artist by providing a reference.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p><strong>citation (noun)</strong>: a properly formatted line of text that indicates the source for a quote, idea, fact etc. that you use.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p>If you are repeating a section of the article for emphasis, use an aside element.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p> A blockquote element cannot be inside a paragraph, and since HTML4 actually needs to contain paragraphs.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p><strong>to cite (verb)</strong>: to acknowledge (give credit to) the original author or artist by providing a reference.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p><strong>citation (noun)</strong>: a properly formatted line of text that indicates the source for a quote, idea, fact etc. that you use.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p>If you are repeating a section of the article for emphasis, use an aside element.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
<blockquote>
<p> A blockquote element cannot be inside a paragraph, and since HTML4 actually needs to contain paragraphs.</p>
<cite>Someone Said<br />
Said it Here</cite> </blockquote>
</section>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
</body>
</html>
Please click full screen button to show full my example.
Or JsFiddle: https://jsfiddle.net/gyzsaueg/2/
Add position:absolute; to your css for simple header
.white-back{
position: absolute;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background: #fff;
display: flex;
object-fit: center;
align-items: center;
}
You will have to adjust the height and width after.
Hope this helps.