CSS3 Hover Info Box | Premier League New Stars

Developer
Stathis Nikolaidis
Size
3,211 Kb
Views
36,432
  1. CSS3 Hover Info Box | Premier League New Stars Previews
  2. CSS3 Hover Info Box | Premier League New Stars HTML Codes
  3. CSS3 Hover Info Box | Premier League New Stars CSS Codes
  4. CSS3 Hover Info Box | Premier League New Stars JS Codes

How do I make an css3 hover info box | premier league new stars?

I used CSS3 transition & transform properties for the hover (dis)appearence and box-shadow & animation properties for the bounce around the box.. What is a css3 hover info box | premier league new stars? How do you make a css3 hover info box | premier league new stars? This script and codes were developed by Stathis Nikolaidis on 21 August 2022, Sunday.

CSS3 Hover Info Box | Premier League New Stars Previews
IQ Test

CSS3 Hover Info Box | Premier League New Stars - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Hover Info Box | Premier League New Stars</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <!-- Frank Lampard | Man City --> <div class="player player_div mancity"> <div class="player_image mancity"> <img src="http://stathis-nikolaidis.com/codepen/lampard.png"> </div> <div class="info"> <div class="player_name"><a href="http://en.wikipedia.org/wiki/Frank_Lampard" target="_blank">FRANK LAMPARD</a></div> <div class="player_club"><a href="http://en.wikipedia.org/wiki/Manchester_City_F.C." target="_blank">MANCHESTER CITY</a></div> </div> </div> <!-- Mario Balotelli | Liverpool --> <div class="player player_div liverpool"> <div class="player_image liverpool"> <img src="http://stathis-nikolaidis.com/codepen/balotelli.png"> </div> <div class="info"> <div class="player_name"><a href="http://en.wikipedia.org/wiki/Mario_Balotelli" target="_blank">MARIO BALOTELLI</a></div> <div class="player_club"><a href="http://en.wikipedia.org/wiki/Liverpool_F.C." target="_blank">LIVERPOOL</a></div> </div> </div> <!-- Diego Costa | Chelsea --> <div class="player player_div chelsea"> <div class="player_image chelsea"> <img src="http://stathis-nikolaidis.com/codepen/costa.png"> </div> <div class="info"> <div class="player_name"><a href="http://en.wikipedia.org/wiki/Diego_Costa" target="_blank">DIEGO COSTA</a></div> <div class="player_club"><a href="http://en.wikipedia.org/wiki/Chelsea_F.C." target="_blank">CHELSEA</a></div> </div> </div> <!-- Danny Welbeck | Arsenal --> <div class="player player_div arsenal"> <div class="player_image arsenal"> <img src="http://stathis-nikolaidis.com/codepen/welbeck.png"> </div> <div class="info"> <div class="player_name"><a href="http://en.wikipedia.org/wiki/Danny_Welbeck" target="_blank">DANNY WELBECK</a></div> <div class="player_club"><a href="http://en.wikipedia.org/wiki/Arsenal_F.C." target="_blank">ARSENAL</a></div> </div> </div> <!-- Radamel Falcao | Man Utd --> <div class="player player_div manutd"> <div class="player_image manutd"> <img src="http://stathis-nikolaidis.com/codepen/falcao.png"> </div> <div class="info"> <div class="player_name"><a href="http://en.wikipedia.org/wiki/Radamel_Falcao" target="_blank">RADAMEL FALCAO</a></div> <div class="player_club"><a href="http://en.wikipedia.org/wiki/Manchester_United_F.C." target="_blank">MANCHESTER UTD</a></div> </div> </div> <div style="clear:both"></div> <img src="http://stathis-nikolaidis.com/codepen/premier-logo.png"> <h2>Hover to see the NEW PREMIER LEAGUE STARS</h2> <h3><a href="http://stathis-nikolaidis.com" target="_blank" title="Web Developer">Created by Stathis Nikolaidis</a></h3>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS3 Hover Info Box | Premier League New Stars - Script Codes CSS Codes

a{ text-decoration:none; color:#fff;
}
.wrapper{ text-align:center; position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; font-weight: 400; font-family:'Roboto Slab'; color:#FFF; background:#c6c6c6;
}
.player{ width:200px; height: 200px; display: inline-block; position: relative; margin: 0px 5px; -webkit-animation:flash 0.4s infinite linear; -moz-animation:flash 0.4s infinite linear; -ms-animation:flash 0.4s infinite linear; -o-animation:flash 0.4s infinite linear; animation:flash 0.4s infinite linear;
}
.player_div .player_image{ -webkit-transition: all 200ms ease-in; -webkit-transform-origin: 50% 20%; -webkit-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform-origin: 50% 20%; -moz-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform-origin: 50% 20%; -ms-transform: scale(1); transition: all 200ms ease-in; transform-origin: 50% 20%; transform: scale(1); width:200px; height: 200px; position: absolute; z-index: 2; left:0;
}
.player_div:hover .player_image{ -webkit-transition: all 200ms ease-in; -webkit-transform: scale(0.6); -moz-transition: all 200ms ease-in; -moz-transform: scale(0.6); -ms-transition: all 200ms ease-in; -ms-transform: scale(0.6); transition: all 200ms ease-in; transform: scale(0.6);
}
.info{ width: 180px; padding:10px; bottom:0; position:absolute; z-index: 1; text-align: left;
}
.player_name{ font-size:19px;
}
.player_club{ font-size:14px;
}
.chelsea{ background-color:#0820A6; color:#FFF;
}
.liverpool{ background-color:#E20806; color:#017359;
}
.mancity{ background-color:#98D9EC; color:#1C1504;
}
.arsenal{ background-color:#EF0007; color:#012F73;
}
.manutd{ background-color:#E10E0E; color:#1D0402;
}
@-webkit-keyframes flash { 0%,75%{ box-shadow: 0 0 0 4px; opacity:1;} 25%{ box-shadow: 0 0 0 1px; opacity:1;} 50%{ box-shadow: 0 0 0 7px; opacity:1; } 100%{ box-shadow: 0 0 0 5px; opacity:1;}
}
@-moz-keyframes flash { 0%,75%{ box-shadow: 0 0 0 4px; opacity:1;} 25%{ box-shadow: 0 0 0 1px; opacity:1;} 50%{ box-shadow: 0 0 0 7px; opacity:1; } 100%{ box-shadow: 0 0 0 5px; opacity:1;}
}
@-ms-keyframes flash { 0%,75%{ box-shadow: 0 0 0 4px; opacity:1;} 25%{ box-shadow: 0 0 0 1px; opacity:1;} 50%{ box-shadow: 0 0 0 7px; opacity:1; } 100%{ box-shadow: 0 0 0 5px; opacity:1;}
}
@-o-keyframes flash { 0%,75%{ box-shadow: 0 0 0 4px; opacity:1;} 25%{ box-shadow: 0 0 0 1px; opacity:1;} 50%{ box-shadow: 0 0 0 7px; opacity:1; } 100%{ box-shadow: 0 0 0 5px; opacity:1;}
}
@keyframes flash { 0%,75%{ box-shadow: 0 0 0 4px; opacity:1;} 25%{ box-shadow: 0 0 0 1px; opacity:1;} 50%{ box-shadow: 0 0 0 7px; opacity:1; } 100%{ box-shadow: 0 0 0 5px; opacity:1;}
}

CSS3 Hover Info Box | Premier League New Stars - Script Codes JS Codes

/*
CSS3 Hover Info Box | Premier League New Stars
The image of the box (player's face in our case) getting smaller while mouse is over to show the information (player's name/team) and at the same time a bounce is playing around the box.
I used CSS3 transition & transform properties for the hover (dis)appearence and box-shadow & animation properties for the bounce around the box.
Each player's box has a unique style of color depending his new team.
Hope you liked it.
For more chech out blog.stathis-nikolaidis.com
*/
CSS3 Hover Info Box | Premier League New Stars - Script Codes
CSS3 Hover Info Box | Premier League New Stars - Script Codes
Home Page Home
Developer Stathis Nikolaidis
Username stathisnikolaidis
Uploaded August 21, 2022
Rating 3
Size 3,211 Kb
Views 36,432
Do you need developer help for CSS3 Hover Info Box | Premier League New Stars?

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
Simple CSS3 Social Icons
CSS3 Simple Moving Background
CSS Pseudo-Elements
CSS3 Rounded Corners
CSS3 Change Text Selection Colour
CSS3 Rising Sun
CSS3 8bit Cristiano Ronaldo
CSS3 Bottle Lifts Up on Hover
Right Sidebar List
Matrix
Create amazing SEO content 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!