CSS3 Bottle Lifts Up on Hover

Developer
Stathis Nikolaidis
Size
2,993 Kb
Views
42,504
  1. CSS3 Bottle Lifts Up on Hover Previews
  2. CSS3 Bottle Lifts Up on Hover HTML Codes
  3. CSS3 Bottle Lifts Up on Hover CSS Codes
  4. CSS3 Bottle Lifts Up on Hover JS Codes

How do I make an css3 bottle lifts up on hover?

Project:The bottle has to lift up on hover. I first used CSS3 Keyframes/Animation (left bottle) but then i had to make a movement for the "un-hover" situation. The CSS3 Transition property made it possible so i kept both of them as a versus battle :). What is a css3 bottle lifts up on hover? How do you make a css3 bottle lifts up on hover? This script and codes were developed by Stathis Nikolaidis on 30 August 2022, Tuesday.

CSS3 Bottle Lifts Up on Hover Previews
IQ Test

CSS3 Bottle Lifts Up on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Bottle Lifts Up on Hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content"> <div class="body_bottle"> Use of CSS3 Animation <div class="bottle"> <a href="http://www.stathis-nikolaidis.com" target="_blank" title="Developed by Stathis Nikolaidis"></a> </div> <div class="first_shadow"></div> <div class="second_shadow"></div> </div> <div class="body_bottle2"> Use of CSS3 Transition <div class="bottle2"> <a href="http://www.stathis-nikolaidis.com" target="_blank" title="Developed by Stathis Nikolaidis"></a> </div> <div class="first_shadow2"></div> <div class="second_shadow2"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS3 Bottle Lifts Up on Hover - Script Codes CSS Codes

body{ margin:50px 0px; padding:0px;	text-align:center;
}
#content{ width:500px; margin:0px auto; text-align:left; position:relative;
}
/******* The Left Bottle (Use of Animation) **********/
.body_bottle{ float:left; width:210px;
}
.bottle{ float:left; position:absolute; top:80px; left:0;
}
.bottle a{ width:127px; height:494px; background:url(http://blog.stathis-nikolaidis.com/wp-content/uploads/2014/07/bottle.png) no-repeat; float:left;
}
.first_shadow{ background:url(http://blog.stathis-nikolaidis.com/wp-content/uploads/2014/07/first_shadow.png) no-repeat; width:182px; height:45px; position:absolute; top:544px; left:0;
}
.second_shadow{ background:url(http://blog.stathis-nikolaidis.com/wp-content/uploads/2014/07/second_shadow.png) no-repeat; width:127px; height:90px; position:absolute; top:544px; left:0;
}
div.body_bottle:hover .bottle a{ animation:moveup 0.5s ; animation-fill-mode: forwards; -webkit-animation:moveup 0.5s ; -webkit-animation-fill-mode: forwards;
}
div.body_bottle:hover .first_shadow{	animation:moveright 0.5s ;	animation-fill-mode: forwards;	-webkit-animation:moveright 0.5s ;	-webkit-animation-fill-mode: forwards;
}
div.body_bottle:hover .second_shadow{	animation:movedown 0.5s ;	animation-fill-mode: forwards;	-webkit-animation:movedown 0.5s ;	-webkit-animation-fill-mode: forwards;
}
/******* The Keyframes **********/
@keyframes moveup{ 0% {margin-top:0;} 100% {margin-top:-25px;}
}
@-webkit-keyframes moveup{ 0% {margin-top:0;} 100% {margin-top:-25px;}
}
@keyframes movedown{ 0% {margin-top:0;} 100% {margin-top:15px;opacity:0.7;}
}
@-webkit-keyframes movedown{ 0% {margin-top:0;} 100% {margin-top:15px;opacity:0.7;}
}
@keyframes moveright{ 0% {width:182px;height:45px;background-size: 100%;} 100% {width:202px;height:55px;background-size: 100%;opacity:0.8;}
}
@-webkit-keyframes moveright{ 0% {width:182px;height:45px;background-size: 100%;} 100% {width:202px;height:55px;background-size:100%;opacity:0.8;}
}
/******* The Right Bottle (Use of Transition) **********/
​
.body_bottle2{ float:left; width:210px;
}
.bottle2{ float:left; position:absolute; top:80px; left:210px;
}
.bottle2 a{ width:127px; height:494px; background:url(http://blog.stathis-nikolaidis.com/wp-content/uploads/2014/07/bottle2.png) no-repeat; float:left; margin-top:0; -webkit-transition: margin-top 0.5s ; -moz-transition: margin-top 0.5s ; -ms-transition: margin-top 0.5s ; -o-transition: margin-top 0.5s ; transition: margin-top 0.5s ;
}
.first_shadow2{ background:url(http://blog.stathis-nikolaidis.com/wp-content/uploads/2014/07/first_shadow2.png) no-repeat; width:182px; height:45px; position:absolute; top:544px; left:210px; opacity:1; -webkit-transition: all 0.5s ; -moz-transition: all 0.5s ; -ms-transition: all 0.5s ; -o-transition: all 0.5s ; transition: all 0.5s ;
}
.second_shadow2{ background:url(http://blog.stathis-nikolaidis.com/wp-content/uploads/2014/07/second_shadow2.png) no-repeat; width:127px; height:90px; position:absolute; top:544px; left:210px; margin-top:0; opacity:1; -webkit-transition: margin-top 0.5s, opacity 0.5s ; -moz-transition: margin-top 0.5s, opacity 0.5s ; -ms-transition: margin-top 0.5s, opacity 0.5s ; -o-transition: margin-top 0.5s, opacity 0.5s ; transition: margin-top 0.5s, opacity 0.5s ;
}
div.body_bottle2:hover .bottle2 a{ margin-top:-25px; -webkit-transition: margin-top 0.5s ; -moz-transition: margin-top 0.5s ; -ms-transition: margin-top 0.5s ; -o-transition: margin-top 0.5s ; transition: margin-top 0.5s ;
}
div.body_bottle2:hover .first_shadow2{ width:202px; height:55px; background-size: 100%; opacity:0.8; -webkit-transition: all 0.5s ; -moz-transition: all 0.5s ; -ms-transition: all 0.5s ; -o-transition: all 0.5s ; transition: all 0.5s ;
}
div.body_bottle2:hover .second_shadow2{	margin-top:15px; opacity:0.7; -webkit-transition: margin-top 0.5s, opacity 0.5s ; -moz-transition: margin-top 0.5s, opacity 0.5s ; -ms-transition: margin-top 0.5s, opacity 0.5s ; -o-transition: margin-top 0.5s, opacity 0.5s ; transition: margin-top 0.5s, opacity 0.5s ;
}

CSS3 Bottle Lifts Up on Hover - Script Codes JS Codes

/*
Animation vs Transition
The benefit of using transition instead of animation in a hover CSS3 movement, is that you can have movement in the "un-hover" situation too.
For more chech out blog.stathis-nikolaidis.com
------------------------------------------------
Compatibility of Transition CSS3 property as of June 2014
Global support: 82.53% (data from http://caniuse.com/css-transitions)
Unprefixed:
Android browser 4.4+
Chrome 26+
Chrome for Android 31+
Firefox 16+
Firefox for Android 23+
IE10+
IE Mobile 10+
Opera 12.1+
Opera Mobile 12.1+
Safari 7+
-webkit prefixed (WebKit engine):
Android browser 2.1 to 4.3
Chrome up to 25
Chrome for Android up to 31
Mobile Safari (iOS) 3.2 to 6
Safari 3.1 to 6
Blackberry browser 7+
-moz prefixed (Gecko engine)
Firefox 4 to 15
-o prefixed (Presto engine)
Opera 10.5 to 12
Opera Mobile 10 to 12
Unsupported
IE up to IE9
Firefox up to 3.6
Opera up to 10.1
Opera Mini
*/
CSS3 Bottle Lifts Up on Hover - Script Codes
CSS3 Bottle Lifts Up on Hover - Script Codes
Home Page Home
Developer Stathis Nikolaidis
Username stathisnikolaidis
Uploaded August 30, 2022
Rating 3
Size 2,993 Kb
Views 42,504
Do you need developer help for CSS3 Bottle Lifts Up on Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stathis Nikolaidis (stathisnikolaidis) Script Codes
Name
CSS3 Rounded Corners
CSS3 Simple Moving Background
Simple CSS3 Social Icons
CSS3 8bit Cristiano Ronaldo
CSS Pseudo-Elements
CSS3 Rising Sun
Matrix
CSS3 Change Text Selection Colour
Right Sidebar List
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!