Hello currently I have a div where I would like it to rotate consistently without having to hover or click. here is a working jfiddle of what it is currently. I would like to make that div rotate consistently. http://jsfiddle.net/CsDLG/1/
h3 {
font: 22px normal Futura, sans-serif;
color:#333;
}
#f1_container {
width:430px;
height:250px;
position:relative;
left:35px;
top:10px;
z-index:1;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
margin:15px;
}
#f1_card {
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 1s linear;
-moz-transform-style:preserve-3d;
-moz-transition:all 1s linear;
-o-transform-style:preserve-3d;
-o-transition:all 1s linear;
transform-style:preserve-3d;
transition:all 1s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.face {
position:absolute;
width:100%;
height:100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.face.back {
display:block;
-webkit-transform:rotateY(180deg);
-webkit-box-sizing:border-box;
-moz-transform:rotateY(180deg);
-moz-box-sizing:border-box;
-o-transform:rotateY(180deg);
-o-box-sizing:border-box;
transform:rotateY(180deg);
box-sizing:border-box;
color:#f5f5f5;
text-align:center;
background-color:#f5f5f5;
padding:10px;
}
.underz {
background:url(http://farm6.staticflickr.com/5069/5614374365_24c4fd01d2_z.jpg) center bottom;
width:430px;
height:250px;
}
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face 1">
<div class="underz"></div>
</div>
<div class="back face center"><h3>We work while we play and have fun!</h3>
</div>
</div>
</div>
You need a CSS3 animation to do this. (remember this feature only exists in Safari and Chrome). then, set the iteration count value to infinite.
here is a demo
animation-iteration-count:infinite;
-webkit-animation-iteration-count: infinite;
Related
When I place my menu button inside my header div and open the menu, the close button disappears. This happens after the overlay on the screen. I have tried to fix this with the z-index but nothing changes. I can only see the open button when the menu is closed inside the header. The close menu button shows when the button is not placed inside a header div.
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
#charset "UTF-8";
ul {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
li {
padding:0;
margin:0;
}
/*styling open close button*/
.button {
padding:10px;
display:inline;
position:fixed;
right:50px;
top:6px;
z-index:999;
font-size:30px;
}
.button a {
text-decoration:none;
}
.btn-open:after {
color:#071914;
content:"\f0c9";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
color:#fafd23;
}
.btn-close:after {
color:#071914;
content:"\f00d";
font-family:"FontAwesome";
z-index:100;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
color: #fafd23;
}
/*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:#FFF;
overflow:auto;
z-index:99;
}
/** SOCIAL ICON **/
.wrap {
color:#f2f2f2;
text-align:center;
max-width:90%;
margin:0 auto;
}
.wrap ul.wrap-nav {
border-bottom:1px solid #071914;
text-transform:capitalize;
padding:100px 0px 50px;
}
.wrap ul.wrap-nav li {
font-size:1.7em;
display:inline-block;
vertical-align:top;
width:24%;
position:relative;
}
.wrap ul.wrap-nav li a {
color:#071914;
display:block;
padding:8px 0;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.wrap-nav h1{
color:#071914;
font-family:'spinweradbold';
text-transform:uppercase;
letter-spacing:1px;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:.7em;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#071914;
}
.wrap ul.wrap-nav ul li a:hover {
color:#6dd7d7;
}
.social {
font-size:25px;
padding:20px;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:13px;
}
.social-icon {
width:80px;
height:50px;
background:#071914;
color:#fff;
display:inline-block;
margin:0 20px;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.social-icon:hover {
background:#6dd7d7;
color:#FFF;
}
.social-icon i {
margin-top:12px;
}
.content {
width:100%;
margin-top:200px;
font-size:20px;
color#333;
text-align: center;
}
#media screen and (max-width:48em) {
.button{
margin-top:15px;
margin-right:-30px;
}
.wrap ul.wrap-nav>li {
width:100%;
padding:20px 0;
border-bottom:1px solid #6dd7d7;
}
.wrap ul.wrap-nav {
padding:30px 0px 0px;
}
nav ul {
opacity:0;
visibility:hidden;
}
.social {
color:#c1c1c1;
font-size:25px;
padding:15px 0;
}
.social-icon {
width:100%;
height:50px;
background:#fff;
color:#333;
display:block;
margin:5px 0;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:5px;
}
}
<div class="header-section">
<div class="logo">
<a class="logo-img" href="#home"><img src="images/logo.png"></a>
</div>
<div class="button">
<a class="btn-open" href="#current"></a>
</div>
</div><!--end of header-->
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><h1>main</h1>
<ul>
<li>Welcome</li>
<li>Biography</li>
<li>Contact Me</li>
</ul>
</li>
<li><h1>web</h1>
<ul>
<li>Ad Designs</li>
<li>Web Design</li>
<li>Mockups</li>
<li>Wireframes</li>
</ul>
</li>
<li><h1>graphic</h1>
<ul>
<li>Logo Design</li>
<li>Typography</li>
<li>Color Theory</li>
</ul>
</li>
<li><h1>illustration</h1>
<ul>
<li>Illustrations</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://linkedin.com/in/natishacorona" target="_blank">
<div class="social-icon">
<i class="fa fa-linkedin"></i>
</div>
</a>
<a href="https://twitter.com/GAN_N" target="_blank">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
</div>
</div>
</div>
</div><!--header-main-->
I'm sorry this is going to be confusing, I have applied a js function to a div of a sidebar so when you click another bar slides from the left. But it used to work with the hover css function. The thing is on the sliding sidebar there are a few menus you can click. Now that I've changed the way the bar slides (with css), you can't click on them anymore.
My code is down there but the snippet isn't looking good at all because the dimensions are wrong I guess.. Sorry but you can see what it looks like here
function myFunction(x) {
x.classList.toggle("change");
}
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});
</script>
#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}
.bar1, .bar2, .bar3 {
cursor:pointer;
position:relative;
left:18px;
top:25px;
width: 35px;
height: 5px;
background-color:{color:Main icon background};
margin: 6px 0px;
transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
-ms-transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
-ms-transform: rotate(45deg) translate(-8px, -8px) ;
}
/*------ SIDEBAR -----*/
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ Narrow sidebar -----*/
#sidebar1{
z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}
/*------ Wide sidebar -----*/
#sidebar2{
z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 65px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
-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;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: scale(1.4, 1.4);
-webkit-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
/* Description */
#description{
position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
#description:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
/* Search box */
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
/* Navigation */
#navi{
cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navi .fa-chevron-down {
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
/* Social icons */
#socialicons{
margin-top:0px;
}
#socialicons i{
display:inline-block;
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
#socialicons i:hover{
color:{color:Hover}!important;
}
/*----- MAIN CONTAINER -----*/
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
}
<div id="more">
<div id="sidebar">
<div id="sidebar1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="avatar"><img src="{image:Avatar}"></div>
</div>
<div id="sidebar2">
<div id="description">
{Description}</div>
<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
{text:Link One Title}
{text:Link Two Title}
{text:Link Three Title}
{text:Link Four Title}
{text:Link Five Title}
</div>
<!--End navigationin-->
<div id="socialicons">
<center>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-youtube"></i>
</center>
</div>
<!--End socialicons-->
</div>
</div>
<!--End sidebar1-->
</div>
<!--End sidebar-->
</div>
<!--End more-->
Thank you so much if you can help me I know it's not clear.. I'm sorry!
Use the developer tools and check out #container - it's covering your sidebar, so - you can't click what's under it.
I'm trying to add an image when the checkbox is checked, I'm trying adicionala to append but could not add someone could help me?
HTML
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.0);
-webkit-transform:scale(1.0);
transform:scale(1.0);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script>
$('input[type=checkbox]').change(function(){
if($('input[type=checkbox]:checked') == true){
$("hovereffect").append('<img id="heart" class="img-responsive" src="../images/heart.png">');
return;
}
});
</script>
how do I can do this to add an image of the heart when the checkbox is checked
Your class is hovereffect so jquery syntax will be
$(".hovereffect") instead of
$("hovereffect")
I'm actually trying to obtain the reverse effect of this: http://jsfiddle.net/4fgnd/ I want my image to have a black overlay with some transparency, and when I hover with the mouse I'd like the overlay to dissapear.
Any thoughts please? Don't really care if it's css only or a combination between css and js.
Thanks
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>
.image {
position:relative;
width:400px;
height:400px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.4);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
Here you go, simply reverse the css http://jsfiddle.net/4fgnd/1226/
.image:before {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:before {
opacity:1;
}
.image:hover:before {
opacity:0;
}
Switch opacity state in the css :)
Working example here http://jsfiddle.net/4fgnd/1225/
.image {
position:relative;
width:400px;
height:400px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:1;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:0;
}
Please look at this Fiddle. As you wil see that the cost div is positioned relatively but I want to position it absolutely. However positioning it absolutely send it to the bottom of the page.
.wrapper
{
width:200px;
height:200px;
border:solid 2px red;
}
.container
{
width:200px;
height:200px;
background-color:#000;
position:;
}
.image
{
position:;
top:0px;
left:0px;
background-image:url(http://www.sat2home.com/satspacer//mobile/MobileTV.jpg);
background-position:50% 50%;
background-size:contain;
background-repeat:no-repeat;
z-index:1;
}
.cost
{
position:relative;
height:30px;
left:0px;
right:0px;
bottom:0px;
background-color:red;
color:#000;
font-size:13px;
padding-top:170px;
transition:all linear 0.5s;
-moz-transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
z-index:-1;
}
You need to set .wrapper elements position to either relative or absolute.
.wrapper
{
width:200px;
height:200px;
border:solid 2px red;
position:relative;
}
Because absolute elements are positioned based on the closest ancestor that is absolutely or relatively positioned.
This should even work if you set the same for .container element
Check Fiddle
adding position:relative; to container class does the trick.
.container
{
width:200px;
height:200px;
background-color:#000;
position:;
}
Add position: absolute to the cost class
.cost
{
position:absolute;
height:30px;
left:0px;
right:0px;
bottom:0px;
background-color:red;
color:#000;
font-size:13px;
padding-top:170px;
transition:all linear 0.5s;
-moz-transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
z-index:-1;
}
.cost
{
position:absolute;
width:200px;
height:30px;
top:200px;
left:10px;
right:0px;
/*bottom:0px;*/
background-color:red;
color:#000;
font-size:13px;
/*padding-top:170px;*/
transition:all linear 0.5s;
-moz-transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
z-index:-1;
}
Did some modifications in ur fiddle- Here
Hey Ankit you can give the position:relative; to your container div and than if you will give the position:absolute; to your cost div so it will not go to the bottom of the page see the updated css :-
Basically if your parent div is with position:relative; and your child div with
position:absolute; so therefore your child div will be under the control of your parent div and will not go automatically anywhere out of the parent div
CSS
.wrapper
{
width:200px;
height:200px;
border:solid 2px red;
}
.container
{
width:200px;
height:200px;
background-color:#000;
position:relative;
}
.image
{
position:;
top:0px;
left:0px;
background-image:url(http://www.sat2home.com/satspacer//mobile/MobileTV.jpg);
background-position:50% 50%;
background-size:contain;
background-repeat:no-repeat;
z-index:1;
}
.cost
{
position:absolute;
height:30px;
left:0px;
right:0px;
bottom:0px;
background-color:red;
color:#000;
font-size:13px;
padding-top:170px;
transition:all linear 0.5s;
-moz-transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
z-index:-1;
}
DEMO
Try to put the follow rule in your div.container:
div.container { position: relative; }
Here's a DEMO: