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
Related
.ellenon {
box-sizing: border-box;
width: 350px;
height:350px;
background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
filter: grayscale(100%);
color:white;
transition: 0.5s;
}
.ellenon :where(h1, p) {
line-height:1.5em;
letter-spacing: 1.1px;
padding-right: 10px;
padding-left: 10px;
transition: 0.5s;
}
.ellenon:hover {
filter: grayscale(0%);
}
.ellenon h1:hover {
transform: translate(0px, -20px);
color:transparent;
transition: 0.5s;
}
.ellenon p:hover {
transform: translate(0px, 20px);
color:transparent;
transition: 0.5s;
}
.ellenon2:hover {
transform: translate(0px, -20px);
color:transparent;
}
<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>
Hello there, I am trying to create a simple CSS animation as you can see in my code. However, I can't understand how to execute both hovers once the user hovers over the external div. Is this possible with raw CSS or JS is needed?
Thanks
You can select the .outer:hover and .outer:hover .inner so both will change when the outer is hovered
.outer{
width:100px;
height:100px;
background-color:orange;
}
.inner{
width:50px;
height:50px;
background-color:blue;
}
.outer:hover{
background-color:green;
}
.outer:hover .inner{
background-color:red;
}
<div class="outer">
<div class="inner"></div>
</div>
use .one:hover .two . if you have hover on .one you change .two
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
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:
Im trying to make my social icons bounce using the jQuery UI Bounce Effect. Im working off a template & some docs from jQuery. The rest im just trying to write the HTML,CSS & JS myself so i probably have some errors in there. Im having a problem getting the icons to bounce. I think it could be because im using a sprite image for the social icons.
Can someone take a look at it and help me out?
The jQuery & jQuery UI in the header
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"</script>
The CSS being used:
#footer {background:#1c1c1c; padding:40px 0 20px; border-top:4px solid #fff;}
#footer a {color:#fff;}
#footer a:hover {color:#d5d5d5;}
#footer .social-icons {float:right;}
#footer .copyright img {float:left; margin-right:20px;}
#footer .copyright p {
font-size:80%;
line-height:140%;
}
#footer .social-icons { }
#footer .social-icons li.title {line-height:30px;}
#footer .social-icons li {margin:0 0 0 10px; }
#footer .social-icons li:first-child {margin-left:0;}
/* social icons */
.social-icons {margin:0 0 20px;}
.social-icons li {display:inline-block; margin:5px;vertical-align: middle;}
.social-icons li a {display:inline-block; width:30px; height:30px; text-indent:-9999px; background-image:url(../images/social-icons-sprite.png); background-repeat: no-repeat; position:relative; background-color: #111; -webkit-border-radius:3px; -moz-border- radius:3px; border-radius:3px;
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o- transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.social-icons li a:hover {background-color:#cd2122; box-shadow:0 0 6px rgba(0,0,0,0.4)}
.social-icons li.social-twitter a {background-position:0 0;}
.social-icons li.social-dribbble a {background-position:-30px 0;}
.social-icons li.social-facebook a {background-position:-60px 0;}
.social-icons li.social-envato a {background-position:-90px 0;}
The HTML of where the icons are positioned.
<div id="footer">
<div class="row">
<div class="span12">
<div class="bottom fixclear">
<ul class="social-icons fixclear">
<li class="title">SOCIAL LOVE</li>
<li class="social-twitter">
Twitter
</li>
</ul>
Finally, the JS i think need to insert and run correctly.
<style type="text/css">
footer li.social-twitter {
width: 32px;
height: 32px;
}
</style>
<script>
$(document).ready(function() {
$("div").mouseenter(function () {
$(this).effect("bounce", { times:3 }, 270);
});
});
</script>
You could use #keyframes animation for this effect.
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Check out Animate.css Dan Eden has created a plug and play animation library that is very cool for things like this.
You can achieve the same bouncing effect using only CSS3. The #keyframes and animation properties will do the job. Here is the working example in JSFiddle. Each image bounces on hover.