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;
}
Related
So I just started learning code and so I figured I would start with something simple and include a bunch of styling aspects and animations using keyframes. When one of my animations starts, I have the word 'hello' fading into view and then fading out of view. When the animation is done though, the word hello doesn't completely disappear, it pops into the top left corner of my screen and won't leave. Just curious if anyone knows how to get rid. Like I said, I just started learning so any simple steps would be appreciated. I throw in the code that I currently have.
Thanks.
<!DOCTYPE html>
<style>
.star1{
border-radius:50%;
width:25px;
height:25px;
position:fixed;
animation-name: flash;
animation-duration: 1s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star2{
border-radius:50%;
width:15px;
height:15px;
position:fixed;
animation-name: twinkle;
animation-duration: 2s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star3{
border-radius:50%;
width:25px;
height:25px;
position:fixed;
animation-name: bright;
animation-duration: 3s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star4{
border-radius:50%;
width:10px;
height:10px;
position:fixed;
animation-name: blink;
animation-duration:2s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:ease-out;
}
.moon{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 0px white;
left:350px;
bottom:300px;
}
#keyframes flash{
0%{
top:50px; left:100px; opacity:0.5;
}
50%{
top:50px; left:100px; transform:scale(0.5);opacity:.25;
}
100%{
top:50px; left:100px; opacity:0.5;
}
}
#keyframes twinkle{
0%{
top:250px; left:300px; opacity:0.5;
}
20%{
top:250px; left:300px; transform:scale(0.5);opacity:.25;
}
100%{
top:250px; left:300px; opacity:0.5;
}
}
#keyframes bright{
0%{
top:100px; left:0px; opacity:0.5;
}
50%{
top:125px; left:700px; transform:scale(0.5);opacity:.25;
}
100%{
top:120px; left:700px; transform(0.1); opacity:0;
}
}
#keyframes blink{
0%{
top:100px; left:450px; opacity:0.25;
}
50%{
top:100px; left:450px; transform:scale(0.5);opacity:.15;
}
100%{
top:100px; left:450px; opacity:0.25;
}
}
.h1{
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
}
#keyframes words{
0%{
top:400px; left:300px; opacity:0;
}
50%{
top:400px; left:300px; opacity:1;
}
100%{
top:400px; left:300px; opacity:0; display:none;
}
}
#back {
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
</style>
<div id="back"></div>
<div class="moon"></div>
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="h1">Hello</div>
Once the animation is finished the div only has the properties you've defined on it, so just add opacity:0; to .h1.
.h1 {
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
opacity:0;
}
Add animation-fill-mode property to your .h1 class.
.h1{
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes words{
0%{
top:400px; left:300px; opacity:0;
}
50%{
top:400px; left:300px; opacity:1;
}
100%{
top:400px; left:300px; opacity:0; display:none;
}
}
It is required if you want to kept the state of the last frame after animation is over.
You can also add top, left and opacity to the .h1 class those defined in the #keyframes are now used only when this element is animated.
I want to animate the div when moving from left to right
The div is moving fine but with no animation
It is very fast
and more over i have assigned the top and right property to the div when hover but it is not happening
HTML:
<body><div></div></body>
CSS:
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 10s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
div:hover
{
right:30px;
top:10px;
}
JS Fiddle
I need the div to be moved with ease and slowly
First you need to define right for starting position, e.g right: calc(100% - 100px);
.wrap {
width: 100%;
height: 100px;
background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}
<div class="wrap">
<div class="cube"></div>
</div>
Try this, it's works
div {
width:100px;
height:100px;
background:red;
transition: 1000ms;
position:absolute;
left: 0;
}
div:hover {
left: 100%;
margin-left: -100px;
}
JSFiddle http://jsfiddle.net/3SYka/287/
Replace right,left with margin-left.
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:linear;
position:absolute;
}
div:hover
{
margin-left:80%; /* Using margin-left */
top:10px;
}
<body>
<div></div>
</body>
Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser?
Try to use it, here is an example with transform
jsfiddle
Quick question guys - what would be the best method to achieve effect like below? I want the exact shape of a button, but in different colour, to slide in from the bottom. I currently have the button on pure CSS, can I keep it that way (preferred) or do I need to make the button a sprite gfx and just animate background position?
You can do it with pure CSS:
.button {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, blue 50%, orange 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.button {
background-position: 0 +100%;
}
http://jsfiddle.net/P6Jx7/
You can do it with :before pseudo-selector like this:
HTML
<div class="button">Send</div>
CSS
.button {
width:150px;
border-radius:10px;
position:relative;
overflow:hidden;
}
.button a{
display:block;
height:50px;
line-height:50px;
position:relative;
z-index:10;
}
.button:before {
content:" ";
display:block;
width:150px;
height:50px;
border-radius:10px;
background:orange;
position:absolute;
left:0;
top:100%;
transition:all 1s;
}
.button:hover:before {
top:0;
}
Check this Demo Fiddle
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;
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: