I am trying to figure out why there is a strange gap/margin at the bottom of each row section in this portfolio grid gallery running in OwlCarousel, see example at http://www.samnorris.net/pfwip2/index.html
I have damn near pulled my hair out already trying to debug the problem in developer tools, and been over the relevant CSS thoroughly but have been unable to figure out what is causing this unwanted padding/margin. Would really appreciate any assistance anyone might be able to offer to help me fix this. :)
I believe it my be something to do with #work .item .rollover, but I am not sure what exactly....
Here is all relevant (as far as I know) code:
///////////////////////////////////////////////////////////////////////////
// Work slider
///////////////////////////////////////////////////////////////////////////
var $workslider = $("#workslider");
if($workslider.length){
$workslider.owlCarousel({
loop : true,
autoplay: true,
autoplayTimeout: 4000,
nav : false,
dots : false,
items : 11,
transitionStyle : "fade"
});
}
/* ==========================================================================
WORK
========================================================================== */
#work.paddingstandard {
padding-bottom: 0px !important;
}
/* ---- isotope grid---- */
#portfoliogrid .item {
width: 20%;
float: left;
cursor: pointer;
overflow: hidden;
padding-bottom: 0px !important;
}
#portfoliogrid .item.width2 {
width: 40%;
}
#portfoliogrid img {
width: 100%
}
/* Item rollover */
#work .item .rollover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 15px;
text-align: center;
}
#work .item .rollover:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 26%;
opacity: 0;
margin-top: 40px;
transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
transform: rotateZ(-45deg);
-webkit-transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
-webkit-transform: rotateZ(-45deg);
}
#work .item.width2 .rollover:before {
width: 25%;
left: 38%;
}
#work .item .rollover .centerContainer {
opacity: 0;
height: 100%;
transition: all 0.3s 0.1s;
transform: rotateZ(-5deg);
-webkit-transition: all 0.3s 0.1s;
-webkit-transform: rotateZ(-5deg);
}
#work .item .rollover .centerContainer a {
font-family: "Montserrat";
font-size: 1.250rem;
font-weight: bold;
letter-spacing: -2px;
color: #FFFFFF;
display: block;
text-transform: uppercase;
text-decoration: none !important;
}
#work .item .rollover .centerContainer .title {
font-size: 2.8rem;
line-height: 2.8rem;
margin-bottom: 15px;
}
#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
opacity: 1;
margin-top: 0px;
transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
-webkit-transform: rotateZ(0deg);
}
#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
opacity: 1;
transition: all 0.3s 0.6s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.6s;
-webkit-transform: rotateZ(0deg);
}
/* WORK OPEN ANIMATION */
#keyframes turn {
0% {
transform: rotate(45deg);
}
15% {
transform: rotate(135deg);
}
25% {
transform: rotate(135deg);
}
40% {
transform: rotate(225deg);
}
50% {
transform: rotate(225deg);
}
65% {
transform: rotate(315deg);
}
75% {
transform: rotate(315deg);
}
90% {
transform: rotate(405deg);
}
100% {
transform: rotate(405deg);
}
}
#workLoader {
position: absolute;
z-index: 10000;
-webkit-transition: all 0.8s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
#workLoader .iconloader {
position: relative;
z-index: 20;
display: block;
margin: 0 auto;
width: 30px;
height: 100%;
width: 100%;
}
#workLoader .iconloader:after {
content: "";
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
border: 4px solid #FFFFFF;
transform: rotateZ(45deg);
animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-webkit-transform: rotateZ(45deg);
-webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-ms-transform: rotate(45deg);
}
#workLoader.width2 .iconloader:after {
width: 25%;
left: 38%;
}
#workLoader .front, #workLoader .back {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#workLoader .front {
text-align: center;
}
#workLoader .front img {
width: 100%;
opacity: 0.2;
}
#workLoader .back {
background-color: rgba(20, 20, 20, .95);
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
#workLoader .back #wrkclosebtn {
position: fixed;
top: 10px;
right: 20px;
}
#workLoader .back .fa-times {
font-size: 2rem;
cursor: pointer;
color: #5f5f5f
}
#workLoader .back .fa-times:hover {
color: #FFFFFF
}
.scale100 {
width: 100% !important;
height: 100% !important;
left: 0 !important;
transform: perspective(1000px) rotateX(-180deg);
-webkit-transform: perspective(1000px) rotateX(-180deg);
}
#workdetailcontainer.darkBackground {
padding-top: 40px;
}
/* FIX IE 9/10/11 */
.IE #workLoader {
transition: all .8s !important;
transform: none;
}
.IE #workLoader .front, .IE #workLoader .back {
transition: all .8s !important;
}
.IE #workLoader .back {
transform: perspective(1000px) rotateX(180deg) !important;
}
.IE #wrkclosebtn {
display: none;
}
.IE .scale100 #wrkclosebtn {
display: inline;
}
.IE .scale100 {
transition: none !important;
transform: rotateX(0deg) !important;
}
.IE #workLoader.scale100 .back {
transform: perspective(1000px) rotateX(0deg) !important;
z-index: 10;
}
.IE #workLoader.scale100 .front {
transform: perspective(1000px) rotateX(-180deg) !important;
}
.IE9 #workLoader {
background-color: green;
opacity: 0;
}
/* ==========================================================================
WORK DETAILS
========================================================================== */
#workdetail {
padding: 40px 0;
}
#workdetail h1 {
color: #FFFFFF;
line-height: 4rem;
margin-bottom: 35px;
margin-top: 0px;
font-size: 4rem;
text-align: left;
}
#workdetail #detailImg img {
width: 100%;
}
#workdetail .workDouble #detailImg {
margin-bottom: 35px;
}
#workdetail p, #workdetail #details span {
color: #FFFFFF;
}
#workdetail #details {
margin-bottom: 35px;
font-size: 0.9rem;
}
#workdetail #details span {
font-family: 'Montserrat';
}
#workdetail #details li {
color: #CCC;
margin-bottom: 5px;
}
#workdetail .button.tint:hover {
color: #141414;
background-color: #FFFFFF;
}
/* ==========================================================================
ISOTOPE FILTERS GENERAL
========================================================================== */
.isotopeFilter {
margin-bottom: 30px;
}
.isotopeFilter a {
font-size: 1.250rem;
}
.isotopeFilter .is-checked {
color: red;
}
<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Work section
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<section id="work" class="paddingstandard">
<div class="container">
<h2 class="appear" data-animation="translatefrombottom">WORK</h2>
<!-- Description -->
<p class="aligncenter appear">Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc.</p>
<!-- Isotope Filter -->
<nav id="portfolionav" class="isotopeFilter aligncenter appear">
ALL
<a href="#" data-filter-value=".graphic" >GRAPHIC</a>
IMAGE SLIDERS
VIDEO
</nav>
</div>
<div id="portfoliogrid">
<!-- Begin item -->
<div class="item width2 graphic">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-1.html">CREATIVITY SPLASH</a>
VIEW DETAILS
</div>
</div>
</div>
<!-- Item Image -->
<img src="img/work/work-double-1.jpg" alt="Portfolio" />
</div>
<!-- End item -->
<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-2.html">IRRIGATE YOUR MIND</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-1.jpg" alt="Portfolio" />
</div>
<div class="item graphic" data-url="article.html">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-3.html">DOMOTIC</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-2.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-4.html">JOURNEY TO THE LAND OF TEA</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-3.jpg" alt="Portfolio" />
</div>
<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-5.html">FUTURE OF COMMERCE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-4.jpg" alt="Portfolio" />
</div>
<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-6.html">CORPORATE DESIGN</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-5.jpg" alt="Portfolio" />
</div>
<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-7.html">PHOTO STUDIO</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-6.jpg" alt="Portfolio" />
</div>
<div class="item width2 slider" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-8.html">LOOKING FOR AWESOME IDEAS</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-double-2.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-9.html">APP MARKET</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-7.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-10.html">DATA STORAGE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-8.jpg" alt="Portfolio" />
</div>
<div class="item width2 video">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-11.html">VIDEO TIMELAPSE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-double-3.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-12.html">CLEAN DESIGN</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-9.jpg" alt="Portfolio" />
</div>
</div><!-- end "portfoliogrid"-->
</section>
That space is caused by white-space in your html code. You can remove it by applying either...
display:block;
... or...
float:left;
height: auto;
to #portfoliogrid img declaration, on style.css:4218.
I personally prefer the second solution.
As a side-note, you should take a quick look at your console. A library/plugin called glitch seems to output a few errors. I've tested in Chrome and Firefox.
All the DIVs with class .item are absolutely positioned and have a fixed top position which causes this offset.
But all those styles are inline - inside their DIV tags. Apparently (since it's responsive) these settings are assigned dynamically by a script. At smaller widths it works, but on a large screen there's a flaw in the script which causes these few pixels offset. (i.e. seems like there is a little bug in that script)
Related
I would like to put a decription text over image while hover. What is the best way to do it? Do I need any js or there is a css solution?
Instead of the divs in snippet I have images in the shape of circle. Hovering the img makes it little bigger as in example.
Thanks for help.
.circle{
width: 150px;
height: 150px;
background: yellow;
border-radius: 100%;
text-align:center;
display: inline-block;
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
.circle{
width: 150px;
height: 150px;
background: yellow;
border-radius: 100%;
text-align:center;
position: relative;
display: inline-block;
transition: all .2s ease-in-out;
}
.hoverContent {
opacity: 0;
top: 50%;
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
.circle:hover .hoverContent {
opacity: 1;
}
<div class="circle">
<span class="hoverContent">Hey there 1</span>
</div>
<div class="circle">
<span class="hoverContent">Hey there 2</span>
</div>
<div class="circle">
<span class="hoverContent">Hey there 3</span>
</div>
Using only CSS and HTML attributes.
.circle {
width: 150px;
height: 150px;
text-align: center;
background: yellow;
border-radius: 100%;
position: relative;
display: inline-block;
transition: all .2s ease-in-out;
}
.circle:hover{
transform: scale(1.1);
}
/* NEW CODE */
.circle:after {
content: attr(data-desc);
display: none;
position: absolute;
top: 50%;
background-color: white;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:hover:after {
display: inline-block;
}
<div class="circle" data-desc="Hello"></div>
<div class="circle" data-desc="World"></div>
<div class="circle" data-desc="just wrap the img and it works">
<img width="100%" height="100%" src="http://www.matmasar.wz.cz/kone.png">
</div>
I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>
Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.
Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});
You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>
I'm trying to have a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to take up the entire space within the container (basically changing the size of the card/div to 100% x 100% when clicked). I'm unsure if this is possible or not, as all of the examples that I've seen out there typically involve the card/div remaining the same size.
Here's the fiddle I tried working with, but I can't get the basic flipping functionality: https://jsfiddle.net/4dazznb5/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
.cards {
width: 100%;
height: 100%;
background: gray;
padding: 10px;
box-sizing: border-box;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.cards .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: white;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.card {
width: 100%;
background: lightgray;
padding: 6px;
margin: 10px 0;
box-sizing: border-box;
cursor: pointer;
position: relative;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:nth-of-type(1) {
margin-top: 0;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card">
<div class="face front">Card 1 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 2 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 3 Front</div>
<div class="face back">Card 3 Back</div>
</div>
</div>
</div>
Since Tambo's backfaces were better (allowing html content), I made this mix with our answers (tested with success on Mozilla and Chrome):
$('.card').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".face" ).addClass( 'off' );
$( this ).children( ".face" ).removeClass( 'off' );
$( this ).parent( ".cards" ).addClass( 'big' );
$( this ).addClass('flipped');
} else {
$( ".face" ).removeClass( 'off' );
$( ".cards" ).removeClass( 'big' );
$( this ).removeClass('flipped');
}
});
body {
height:100vh;
width:100vw;
margin:0px;
}
#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.cards {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
width: 80%;
height: 20%;
position: absolute;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
margin-left: 10%;
margin-right: 10%;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cards .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 2em;
font-family: arial, sans-serif;
text-align: center;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.cards .card .front {
position: absolute;
background: tomato;
z-index: 1;
}
.cards .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: gold;
}
.cards .card .front,
.cards .card .back{
cursor: pointer;
}
.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class=cards style="top:0px">
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
<div class=cards style="top:25%">
<div class=card>
<div class="face front">
Card 2 Front
</div>
<div class="face back">
Card 2 Back
</div>
</div>
</div>
<div class=cards style="top:50%">
<div class=card>
<div class="face front">
Card 3 Front
</div>
<div class="face back">
Card 3 Back
</div>
</div>
</div>
<div class=cards style="top:75%">
<div class=card>
<div class="face front">
Card 4 Front
</div>
<div class="face back">
Card 4 Back
</div>
</div>
</div>
</div>
Just add !important to the new 'flipped' class attributes overwrites the old ones. The javascript line $( ".item" ).not( this ).addClass( 'off' ) removes the other cards when one is selected. The absolute position let everything on its place. The active card have a higher z-index to ensures that other cards will not activate the 'mouseleave' trigger. UPDATE: finally working 100% on Mozilla and Chrome. ps: a click opens the card and another click closes it.
$('.item').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".item" ).not( this ).addClass( 'off' );
$( this ).addClass('flipped');
} else {
$( ".item" ).removeClass( 'off' );
$( this ).removeClass('flipped');
}
});
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
}
.cards {
width: 100%;
height: 100%;
background: lavender;
position: relative;
-webkit-perspective: 900px;
perspective: 900px;
}
.flipped {
top: 0% !important;
height: 100% !important;
width: 100% !important;
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
color: rgba(0, 0, 0, 0.0);
z-index:100;
-webkit-transform-style: preserve-3d;
background: tomato;
}
.flipped:after {
content: 'More text on here.';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
color: rgba(0, 0, 0, 1.0);
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
background: gold;
}
.card {
height: 22%;
width: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
display: block;
position: absolute;
background: tomato;
}
.aaa {
top:0%;
}
.bbb {
top:26%;
}
.ccc {
top:52%;
}
.ddd {
top:78%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card item aaa">
<div class="face front">Some text on here.</div>
</div>
<div class="card item bbb">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ccc">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ddd">
<div class="face front">Some text on here.</div>
</div>
</div>
</div>
Just play with Element.classList and CSS transitions
// Function to flip the card and expand the content
function flipMe() {
console.log(this.innerHTML);
var card = this.querySelector('.card');
card.classList.add('flipped');
// this handler will be executed every time the cursor is moved off the card
card.addEventListener("mouseout", function( event ) {
this.classList.remove('flipped');
}, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
cardWrapper.addEventListener("click", flipMe, false);
:root {
background: #CAC8CC;
}
.cardWrapper {
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
width: 400px;
height: 300px;
position: relative;
margin: 100px auto;
}
.cardWrapper .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
}
.cardWrapper .card {
width: 100%;
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
.cardWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 4em;
text-align: center;
}
.cardWrapper .card .front {
position: absolute;
background: black;
color: white;
z-index: 1;
}
.cardWrapper .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
cursor: pointer;
}
<div class=cardWrapper>
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
Have two cards with back and front. But in card TWO back, not work. Because i click animation work all time.
Need function for stop animation,if i use input string in card TWO? but works if i use card not input string!
Thx all who help =)
$('.card').click(function(){
$(this).toggleClass('flipped');
});
input.form,
button {
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 16px;
border: 0;
padding: 3px 5px;
border-radius: 3px;
color: #000;
}
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.card-container{
position: relative;
float: left;
width: 48%;
height: 260px;
margin: 30px 0 30px 4%;
background: #fff;
/* Set the depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card-container:first-child {
margin-left: 0;
}
.card {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.formItem:first-child {
margin-top: 20px;
}
.card .back label {
display: inline-block;
width: 70px;
text-align: left;
}
.card .front {
background: #000000;
}
.card .back {
background: #8bc34a;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container:first-child .card .front {
background: #000000;
}
.card-container:first-child .card .back {
background: #8bc34a;
}
.cardTitle {
font-size: 1.4em;
line-height: 1.2em;
margin: 0;
}
.content {
padding: 4%;
font-weight: 100;
text-align: left;
}
button.btnSend {
display: inline-block;
min-width: 100px;
padding: 3px 5px;
margin-top: 10px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: #8bc34a;
background: #fff;
border: 0;
border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Footer -->
<div id="footer" class="container-fluid">
<footer>
<div class="container">
<div class="wrapper-cards">
<!--Cards ONE-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>
About
</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">
Nice
</h3>
<p>
Thx for read this.
</p>
</div>
</div>
</div>
</div>
THIS PROBLEM <!--Cards TWO-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>
Contact Us!
</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">
Send a mail!
</h3>
<p>
We wait letters from you.
</p>
<form>
<div class="formItem">
<label>
Name:
</label>
<input class="form" type="text" name="name" value="name" maxlenght="25" />
</div>
<div class="formItem">
<label>
Email:
</label>
<input class="form" type="text" name="mail" value="mail" maxlenght="35" />
</div>
<button class="btnSend">
Send
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
1.
One possible solution is to check if there are focused elements in the card:
$('.card').click(function() {
$(this).not(':has(:focus)').toggleClass('flipped');
});
$('.card').click(function() {
$(this).not(':has(:focus)').toggleClass('flipped');
});
input.form,
button {
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 16px;
border: 0;
padding: 3px 5px;
border-radius: 3px;
color: #000;
}
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.card-container {
position: relative;
float: left;
width: 48%;
height: 260px;
margin: 30px 0 30px 4%;
background: #fff;
/* Set the depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card-container:first-child {
margin-left: 0;
}
.card {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.formItem:first-child {
margin-top: 20px;
}
.card .back label {
display: inline-block;
width: 70px;
text-align: left;
}
.card .front {
background: #000000;
}
.card .back {
background: #8bc34a;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container:first-child .card .front {
background: #000000;
}
.card-container:first-child .card .back {
background: #8bc34a;
}
.cardTitle {
font-size: 1.4em;
line-height: 1.2em;
margin: 0;
}
.content {
padding: 4%;
font-weight: 100;
text-align: left;
}
button.btnSend {
display: inline-block;
min-width: 100px;
padding: 3px 5px;
margin-top: 10px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: #8bc34a;
background: #fff;
border: 0;
border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Footer -->
<div id="footer" class="container-fluid">
<footer>
<div class="container">
<div class="wrapper-cards">
<!--Cards ONE-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>About</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Nice</h3>
<p>
Thx for read this.
</p>
</div>
</div>
</div>
</div>
THIS PROBLEM
<!--Cards TWO-->
<div class="card-container">
<div class="card">
<div class="front">
<h2>Contact Us!</h2>
</div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Send a mail!</h3>
<p>
We wait letters from you.
</p>
<form>
<div class="formItem">
<label>
Name:
</label>
<input class="form" type="text" name="name" value="name" maxlenght="25" />
</div>
<div class="formItem">
<label>
Email:
</label>
<input class="form" type="text" name="mail" value="mail" maxlenght="35" />
</div>
<button class="btnSend">
Send
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
Hi I created tiles with flip and zoom effects.
I am trying to add different transforms to each tile. I am trying to achieve this using css only. I need some help regarding this.
here is the code What I have tried.
HTML:
<div class="wrap" data-sap-ui-preserve="html1" id="html1">
<div class="box">
<div class="boxInner">
<div class="face front">
<img src="images/s.png">
</div>
<div class="face back">
<label class="text">Search Donors...</label>
</div>
</div>
</div>
<div class="box">
<div class="boxInner clicked">
<div class="face front">
<img src="images/r.png">
</div>
<div class="face back">
<label class="text">Register</label>
</div>
</div>
</div>
<div class="box">
<div class="boxInner clicked">
<div class="face front">
<img src="images/u.png">
</div>
<div class="face back">
<label class="text">Update Details</label>
</div>
</div>
</div>
<div class="box">
<div class="boxInner clicked">
<div class="face front">
<img src="images/s.png">
</div>
<div class="face back">
<label class="text">Share</label>
</div>
</div>
</div>
</div>
CSS:
.wrap {
overflow: hidden;
margin: 10px;
-webkit-transform: translateZ(0);
position: relative;
top: 0px;
}
.box {
float: left;
position: relative;
width: 25%;
/* padding-bottom: 15%; */
padding-bottom: 10px;
}
.boxInner {
overflow: hidden;
margin: 10px;
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
}
.boxInner:hover {
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.boxInner img {
width: 100%;
}
.flip {
-webkit-transform: rotatex(-180deg) !important;
}
.front {
z-index: 1;
cursor: pointer;
opacity: 1;
}
.back {
-webkit-transform: rotatex(-180deg);
cursor: pointer;
opacity: 0;
}
.box .boxInner.clicked .back {
opacity: 1;
}
.box .boxInner.clicked .front {
opacity: 0;
}
.box .boxInner.clicked {
-webkit-transform: scaleY(-1);
}
.face {
transition: all 0.5s linear;
position:relative;
}
.text{
padding-top:35%;
position: absolute;
margin-left:35%;
color:#666666;
font-weight:bold;
font-size:100%;
}
.text::first-letter{
font-size:400%;
color:#009de0;
margin-top:10px;
}
body.no-touch .boxInner:hover .titleBox,body.touch .boxInner.touchFocus .titleBox
{
margin-bottom: 0;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
}
}
JS:
$(".boxInner").click(function(){
$(this).toggleClass("clicked");
});
Demo Link
Here's the FIDDLE for what you asked. I'm not good in using jquery or javascript. I've added the function for the toggleClass but i'm not good in using it otherwise the CSS3 Transitions are very smooth and clear. Just edit the jquery and the classes then everything's fine.