I have one problem about CSS hover zoom effect.
I have created this DEMO from codepen.io
In this demo you can see there is red color div. When you click the div .CRtW11 will opening. So i want to add hover zoom effect for .ReaC div. I tried the following transform effect but it doesn't worked.
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
I don't understand where i am doing wrong anyone can help me in this regard ?
HTML
CSS
.cR {
width:20px;
height:20px;
position:relative;
background-color:red;
cursor:pointer;
}
.CRtW11 {
position:absolute;
width:215px;
height:40px;
background-color:blue;
opacity:0;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left bottom 0px;
-webkit-transform: scale(0);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.24);
z-index:1;
margin-top:-45px;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
padding:5px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.CRtW11-active {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
opacity: 1;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transform: scale(1);
}
.ReaC {
float:left;
position:relative;
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
background-color:red;
margin-right:5px;
display:none;
opacity:0;
-moz-transition: ease 0.2s;
-o-transition: ease 0.2s;
-webkit-transition: ease 0.2s;
transition: ease 0.2s;
}
.ReaC:hover
{
background:yellow;
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
Try removing the following from .ReaC-active
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
Related
How do I get the white outline out of this button?
Here's the CSS, tell me if you think something caused it.
.btn {
background: linear-gradient(45deg, rgba(51, 197, 230, 0.5) 0%,rgba(51, 230, 131, 0.5) 50%,rgba(108,0,153,0.65) 100%);
border-radius: 10px;
width: 1315px;
color: #fff;
font-size: 18px;
letter-spacing: 1px;
padding: 16px 32px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}
#-webkit-keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#-webkit-keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
.btn {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.btn:hover, a.btn:focus, a.btn:active {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
The above commenters are correct-- border: none and outline: none would be good starts. Remember that the browser itself has some default styles-- if you want to override them before you start trying to style I'd recommend investigating a CSS Reset. Also, is your .btn classed element a div, or a true button? If the latter, remember native form elements are difficult to style appropriately cross browser, so if the visual treatment is important, you should consider using a div and an event handler.
How would I go about adding something to minimize this box I have and also maximise it once its been minimized?
Heres the code to display the box
<header class="info">
<hgroup class="about">
<h1><span class="online_users"> <span id="reload_users" class="reload_users"></span> Online</span> | <span class="room_loaded"> <span id="reload_rooms" class="reload_rooms"></span> Rooms</span></h1>
</hgroup>
<nav class="more">
Buy VIP
</nav>
</header>
and heres the css for it
<style type="text/css">
#-webkit-keyframes show-info {
0% { -webkit-transform: rotateY(120deg); }
100% { -webkit-transform: rotateY(0deg); }
}
#-moz-keyframes show-info {
0% { -moz-transform: rotateY(120deg); }
100% { -moz-transform: rotateY(0deg); }
}
#-ms-keyframes show-info {
0% { -ms-transform: rotateY(120deg); }
100% { -ms-transform: rotateY(0deg); }
}
#-o-keyframes show-info {
0% { -o-transform: rotateY(120deg); }
100% { -o-transform: rotateY(0deg); }
}
#keyframes show-info {
0% { transform: rotateY(120deg); }
100% { transform: rotateY(0deg); }
}
.info {
-webkit-transition: all 180ms ease-out;
-moz-transition: all 180ms ease-out;
-ms-transition: all 180ms ease-out;
-o-transition: all 180ms ease-out;
transition: all 180ms ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(800);
-moz-transform: perspective(800);
-ms-transform: perspective(800);
-o-transform: perspective(800);
transform: perspective(800);
font-family: 'Quantico', sans-serif;
position: absolute;
font-size: 12px;
opacity: 0.65;
color: #fff;
z-index:9999;
width: 240px;
right: 210px;
top: 0px;
border: #333 solid 1px;
border-radius: 5px;
}
.info:hover {
box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
opacity: 1.0;
}
.info h1,
.info h2,
.info h3 {
line-height: 1;
margin: 5px 0;
}
.info .about,
.info .more {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: rotateY(120deg);
-moz-transform: rotateY(120deg);
-ms-transform: rotateY(120deg);
-o-transform: rotateY(120deg);
transform: rotateY(120deg);
margin-bottom: 1px;
background: rgba(0,0,0,0.95);
padding: 12px 15px 12px 20px;
}
.info .about {
-webkit-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
-moz-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
-ms-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
-o-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
padding-bottom: 15px;
}
.info .about h1 {
letter-spacing: -1px;
font-weight: 300;
font-size: 19px;
opacity: 0.95;
}
.info .about h2 {
font-weight: 300;
font-size: 13px;
opacity: 0.8;
}
.info .about h3 {
text-transform: uppercase;
margin-top: 10px;
font-size: 11px;
}
.info .about h3:after {
margin-left: 4px;
font-size: 14px;
content: '\203A';
}
.info .more {
-webkit-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
-moz-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
-ms-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
-o-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
padding: 5px 15px 10px 20px;
}
.info .more a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
border-bottom: 1px dotted rgba(255,255,255,0.4);
text-transform: uppercase;
text-decoration: none;
margin-right: 10px;
font-size: 10px;
opacity: 0.6;
color: #fff;
}
.info .more a:hover {
opacity: 0.99;
}
</style>
would anyone be kind enough as to help me achieve what I am trying to do?
It would be greatly appreciated!
I have not read your styles, base on description:
You can make 2 classes, called -MIN and -MAX
Consider you have wrapped all boxes to a div with MAX style:
then you may have something like this:
<div class='my-prefix-MAX'>
...
<button onload = "resize()">Minimaze<button>
...
<div>
JS:
function resize(){
if(this.parrentNode.className.indexOf('MIN')>-1){
this.parrentNode.className.replace('MIN','MAX');
this.value = 'Maximize'
}else{
this.parrentNode.className.replace('MAX','MIN');
this.value = 'Maximize'
}
}
Both the divs that have same class names are flipping if you hover only one. Just the div that hovered should flip and not all that have the same class name. JQuery code needs to be tweaked rest is all good. So only active div needs to be changed and not all classes with the same name.
<div class="card col-lg-2 col-md-2 block1 ">
<div class="content">
<div class="cardFront">
<br>
<h1>Front Content</h1>
</div>
<div class="cardBack">BACK CONTENT</div>
</div>
</div>
<div class="card col-lg-2 col-md-2 block2 ">
<div class="content div2">
<div class="cardFront">
<br>
<h1>Front Content</h1>
</div>
<div class="cardBack">BACK CONTENT</div>
</div>
</div>
CSS:
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
width:200px;
height:180px;
display:block;
margin: 0 0 20px 28px;
padding: 0 0 20px 0;
text-align: center;
color: white;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-image:url('../images/back10.png');
background-color: #961B1D;
}
.card .content .cardBack {
background-color: #961B1D;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }
JS:
$('.card').hover(function(){
$('.card').toggleClass('applyflip');
}.bind(this));
Just replace $('.card') by $(this) to get the current element
$('.card').hover(function(){
$(this).toggleClass('applyflip');
});
And you don't need and shouldn't bind(this). jQuery does that for you.
You have to use the "this" in your function to say which one you mean.
$('.card').on("hover", function(){
$(this).toggleClass('applyflip');
});
I have a slide out tab that currently shows by default on the left side of my page and hides when the button is clicked, then slides out to be visible again when you click it. How can I set the tab to be hidden by default? Here is my code:
HTML:
<aside id="share-wrapper">
<div id="sharebutton">></div>
<div id="share">
<div class="share-box"><div class="facebook-share">f</div></div>
<div class="share-box"><div class="twitter-share">t</div></div>
<div class="share-box"><div class="google-share">g</div></div>
<div class="share-box"><div class="insta-share">i</div></div>
</div>
</aside>
CSS:
#share-wrapper {
float:left;
width:40px;
height:180px;
margin-top:80px;
}
#share {
border:thin solid #333;
border-left:0px;
border-radius:0px 6px 6px 0px;
width:30px;
padding:0px 5px;
height:170px;
}
#sharebutton {
color:#333;
border:thin solid #333;
height:30px;
width:30px;
border-radius:15px;
text-align:center;
line-height:30px;
margin: 0px 0px 10px 5px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
#sharebutton:hover { color:#eee; background-color:#333; cursor:pointer; }
#sharebutton.open {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.share-box,
.share-box img {
width:30px;
height:30px;
}
.facebook-share,
.twitter-share,
.google-share,
.insta-share { width: 100%; height: 100%; line-height: 30px; text-align: center; color:#333; border:thin solid #333; border-radius:15px; margin:10px 0px; background-color:#eee; cursor:pointer;}
.facebook-share:hover,
.twitter-share:hover,
.google-share:hover,
.insta-share:hover { background-color:#333; color:#eee; }
jQuery:
$(document).ready(function () {
$("#sharebutton").click(function () {
$("#share").toggle("slide");
if ($("#sharebutton").hasClass("open")) {
$("#sharebutton").removeClass("open");
}
else {
$("#sharebutton").addClass("open");
}
});
});
Change your js to this. You hide your share div and add the open class to your sharebutton.
So you have the exact same status as you would click the sharebutton.
$(document).ready(function () {
$("#share").hide(); // You set display:none to your share div
$("#sharebutton").addClass("open"); // You add the open class to the sharebutton
$("#sharebutton").click(function () {
$("#share").toggle("slide");
if ($("#sharebutton").hasClass("open")) {
$("#sharebutton").removeClass("open");
}
else {
$("#sharebutton").addClass("open");
}
});
});
JsFiddle
I am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!
Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the div.