Lightning Vs. Penguins Hover Thingy

Developer
Eric Franklin
Size
3,000 Kb
Views
38,456
  1. Lightning Vs. Penguins Hover Thingy Previews
  2. Lightning Vs. Penguins Hover Thingy HTML Codes
  3. Lightning Vs. Penguins Hover Thingy CSS Codes

How do I make an lightning vs. penguins hover thingy?

Got bored and created a hover thing for the game today.. What is a lightning vs. penguins hover thingy? How do you make a lightning vs. penguins hover thingy? This script and codes were developed by Eric Franklin on 25 July 2022, Monday.

Lightning Vs. Penguins Hover Thingy Previews
IQ Test

Lightning Vs. Penguins Hover Thingy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lightning Vs. Penguins Hover Thingy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="main-container"> <div class="players"> <img class="stammer" src="http://i.imgur.com/2vXhZn4.jpg" alt="" /> <img class="sid" src="http://i.imgur.com/KI5aBS5.png" alt="" /> </div> <div class="bottom-container"> <div class="bolt"> <icon class="fa fa-bolt fa-6x"></i> </div> <div class="pens"> <icon class="fa fa-linux fa-6x"></icon> </div> </div>
</div>
</body>
</html>

Lightning Vs. Penguins Hover Thingy - Script Codes CSS Codes

body,
html { background: #ccc;
}
.main-container { width: 270px; height: 338px; margin-left: 50px; margin-top: 30px; background: white; position: relative; border-radius: 3px; border: 1px solid #eee; overflow: hidden; box-shadow: 1px 2px 14px 0px rgba(50, 50, 50, 0.75);
}
.main-container:hover > .bottom-container .bolt { right: 541px;
}
.main-container:hover > .bottom-container .pens { right: 543px;
}
.main-container:hover > .players .stammer { right: 214px;
}
.main-container:hover > .players .sid { left: -31px;
}
.main-container p { font-size: 30px; font-weight: bold; text-align: center;
}
.main-container:before,
.main-container:after { bottom: 12px; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); content: ""; height: 20%; position: absolute; width: 50%; z-index: -1;
}
.main-container:before { left: 2%; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);
}
.main-container:after { right: 2%; -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);
}
.main-container .players { width: 100%; position: relative; left: 67px; top: 9px;
}
.main-container .players .stammer { width: 54%; float: left; position: relative; right: 0px; background: transparent; transition: right 1s ease-in-out;
}
.main-container .players .sid { width: 101%; position: relative; float: left; left: 234px; bottom: 145px; background: transparent; transition: left 1s ease-in-out;
}
.main-container .bottom-container { width: 1000px; height: auto;
}
.main-container .bottom-container .bolt { float: left; width: 270px; height: 200px; position: relative; background: #003d7c; top: 3px; right: 273px; transition: right 1s ease-in-out;
}
.main-container .bottom-container .bolt .fa-bolt { color: #E4E1E1; font-size: 180px; width: 100%; text-align: center;
}
.main-container .bottom-container .pens { float: left; width: 270px; height: 200px; position: relative; background: #d0bd7f; top: 3px; right: 271px; transition: right 1s ease-in-out;
}
.main-container .bottom-container .pens .fa-linux { color: white; font-size: 175px; width: 100%; text-align: center; margin-top: 8px;
}
Lightning Vs. Penguins Hover Thingy - Script Codes
Lightning Vs. Penguins Hover Thingy - Script Codes
Home Page Home
Developer Eric Franklin
Username FDfranklin
Uploaded July 25, 2022
Rating 3
Size 3,000 Kb
Views 38,456
Do you need developer help for Lightning Vs. Penguins Hover Thingy?

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!

Eric Franklin (FDfranklin) Script Codes
Name
Gif play on hover.
A Pen by Eric Franklin
Animated Image
Fun nav bar blog style
Iguana Blog - LESS
Responsive Table Idea
Portfolio Landing Page
Responsive Wedding Page
Fun with input fields.
Simple jQuery modal with form.
Create amazing blog posts 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!