When hover effect working i wanna show hero name in flexbox items. Now when hover effect not working too you can see hero names. Names must be inside the boxes when the effect works and must not overflow out. In the solution I found, flex items are created with javascript. I could do it if it was done manually in html, but I don’t know how fixing with javascript. How can I solve this problem?
const data = { result: { data: { heroes: [ { id: 1, name: "npc_dota_hero_antimage", name_loc: "Anti-Mage", name_english_loc: "Anti-Mage", primary_attr: 1, complexity: 1, }, { id: 2, name: "npc_dota_hero_axe", name_loc: "Axe", name_english_loc: "Axe", primary_attr: 0, complexity: 1, }, { id: 3, name: "npc_dota_hero_bane", name_loc: "Bane", name_english_loc: "Bane", primary_attr: 2, complexity: 2, }, { id: 4, name: "npc_dota_hero_bloodseeker", name_loc: "Bloodseeker", name_english_loc: "Bloodseeker", primary_attr: 1, complexity: 1, }, { id: 5, name: "npc_dota_hero_crystal_maiden", name_loc: "Crystal Maiden", name_english_loc: "Crystal Maiden", primary_attr: 2, complexity: 1, }, { id: 6, name: "npc_dota_hero_drow_ranger", name_loc: "Drow Ranger", name_english_loc: "Drow Ranger", primary_attr: 1, complexity: 1, }, { id: 7, name: "npc_dota_hero_earthshaker", name_loc: "Earthshaker", name_english_loc: "Earthshaker", primary_attr: 0, complexity: 2, }, { id: 8, name: "npc_dota_hero_juggernaut", name_loc: "Juggernaut", name_english_loc: "Juggernaut", primary_attr: 1, complexity: 1, }, { id: 9, name: "npc_dota_hero_mirana", name_loc: "Mirana", name_english_loc: "Mirana", primary_attr: 1, complexity: 2, }, { id: 11, name: "npc_dota_hero_nevermore", name_loc: "Shadow Fiend", name_english_loc: "Shadow Fiend", primary_attr: 1, complexity: 2, }, { id: 10, name: "npc_dota_hero_morphling", name_loc: "Morphling", name_english_loc: "Morphling", primary_attr: 1, complexity: 3, }, { id: 12, name: "npc_dota_hero_phantom_lancer", name_loc: "Phantom Lancer", name_english_loc: "Phantom Lancer", primary_attr: 1, complexity: 2, }, { id: 13, name: "npc_dota_hero_puck", name_loc: "Puck", name_english_loc: "Puck", primary_attr: 2, complexity: 2, }, { id: 14, name: "npc_dota_hero_pudge", name_loc: "Pudge", name_english_loc: "Pudge", primary_attr: 0, complexity: 2, }, { id: 15, name: "npc_dota_hero_razor", name_loc: "Razor", name_english_loc: "Razor", primary_attr: 1, complexity: 1, }, { id: 16, name: "npc_dota_hero_sand_king", name_loc: "Sand King", name_english_loc: "Sand King", primary_attr: 0, complexity: 2, }, { id: 17, name: "npc_dota_hero_storm_spirit", name_loc: "Storm Spirit", name_english_loc: "Storm Spirit", primary_attr: 2, complexity: 2, }, { id: 18, name: "npc_dota_hero_sven", name_loc: "Sven", name_english_loc: "Sven", primary_attr: 0, complexity: 1, }, { id: 19, name: "npc_dota_hero_tiny", name_loc: "Tiny", name_english_loc: "Tiny", primary_attr: 0, complexity: 2, }, { id: 20, name: "npc_dota_hero_vengefulspirit", name_loc: "Vengeful Spirit", name_english_loc: "Vengeful Spirit", primary_attr: 1, complexity: 1, }, { id: 21, name: "npc_dota_hero_windrunner", name_loc: "Windranger", name_english_loc: "Windranger", primary_attr: 2, complexity: 2, }, { id: 22, name: "npc_dota_hero_zuus", name_loc: "Zeus", name_english_loc: "Zeus", primary_attr: 2, complexity: 1, }, { id: 23, name: "npc_dota_hero_kunkka", name_loc: "Kunkka", name_english_loc: "Kunkka", primary_attr: 0, complexity: 2, }, { id: 25, name: "npc_dota_hero_lina", name_loc: "Lina", name_english_loc: "Lina", primary_attr: 2, complexity: 1, }, { id: 31, name: "npc_dota_hero_lich", name_loc: "Lich", name_english_loc: "Lich", primary_attr: 2, complexity: 1, }, { id: 26, name: "npc_dota_hero_lion", name_loc: "Lion", name_english_loc: "Lion", primary_attr: 2, complexity: 1, }, { id: 27, name: "npc_dota_hero_shadow_shaman", name_loc: "Shadow Shaman", name_english_loc: "Shadow Shaman", primary_attr: 2, complexity: 1, }, { id: 28, name: "npc_dota_hero_slardar", name_loc: "Slardar", name_english_loc: "Slardar", primary_attr: 0, complexity: 1, }, { id: 29, name: "npc_dota_hero_tidehunter", name_loc: "Tidehunter", name_english_loc: "Tidehunter", primary_attr: 0, complexity: 1, }, { id: 30, name: "npc_dota_hero_witch_doctor", name_loc: "Witch Doctor", name_english_loc: "Witch Doctor", primary_attr: 2, complexity: 1, }, { id: 32, name: "npc_dota_hero_riki", name_loc: "Riki", name_english_loc: "Riki", primary_attr: 1, complexity: 1, }, { id: 33, name: "npc_dota_hero_enigma", name_loc: "Enigma", name_english_loc: "Enigma", primary_attr: 2, complexity: 2, }, { id: 34, name: "npc_dota_hero_tinker", name_loc: "Tinker", name_english_loc: "Tinker", primary_attr: 2, complexity: 2, }, { id: 35, name: "npc_dota_hero_sniper", name_loc: "Sniper", name_english_loc: "Sniper", primary_attr: 1, complexity: 1, }, { id: 36, name: "npc_dota_hero_necrolyte", name_loc: "Necrophos", name_english_loc: "Necrophos", primary_attr: 2, complexity: 1, }, { id: 37, name: "npc_dota_hero_warlock", name_loc: "Warlock", name_english_loc: "Warlock", primary_attr: 2, complexity: 1, }, { id: 38, name: "npc_dota_hero_beastmaster", name_loc: "Beastmaster", name_english_loc: "Beastmaster", primary_attr: 0, complexity: 2, }, { id: 39, name: "npc_dota_hero_queenofpain", name_loc: "Queen of Pain", name_english_loc: "Queen of Pain", primary_attr: 2, complexity: 2, }, { id: 40, name: "npc_dota_hero_venomancer", name_loc: "Venomancer", name_english_loc: "Venomancer", primary_attr: 1, complexity: 1, }, { id: 41, name: "npc_dota_hero_faceless_void", name_loc: "Faceless Void", name_english_loc: "Faceless Void", primary_attr: 1, complexity: 2, }, { id: 42, name: "npc_dota_hero_skeleton_king", name_loc: "Wraith King", name_english_loc: "Wraith King", primary_attr: 0, complexity: 1, }, { id: 43, name: "npc_dota_hero_death_prophet", name_loc: "Death Prophet", name_english_loc: "Death Prophet", primary_attr: 2, complexity: 1, }, { id: 44, name: "npc_dota_hero_phantom_assassin", name_loc: "Phantom Assassin", name_english_loc: "Phantom Assassin", primary_attr: 1, complexity: 1, }, { id: 45, name: "npc_dota_hero_pugna", name_loc: "Pugna", name_english_loc: "Pugna", primary_attr: 2, complexity: 2, }, { id: 46, name: "npc_dota_hero_templar_assassin", name_loc: "Templar Assassin", name_english_loc: "Templar Assassin", primary_attr: 1, complexity: 2, }, { id: 47, name: "npc_dota_hero_viper", name_loc: "Viper", name_english_loc: "Viper", primary_attr: 1, complexity: 1, }, { id: 48, name: "npc_dota_hero_luna", name_loc: "Luna", name_english_loc: "Luna", primary_attr: 1, complexity: 1, }, { id: 49, name: "npc_dota_hero_dragon_knight", name_loc: "Dragon Knight", name_english_loc: "Dragon Knight", primary_attr: 0, complexity: 1, }, { id: 50, name: "npc_dota_hero_dazzle", name_loc: "Dazzle", name_english_loc: "Dazzle", primary_attr: 2, complexity: 1, }, { id: 51, name: "npc_dota_hero_rattletrap", name_loc: "Clockwerk", name_english_loc: "Clockwerk", primary_attr: 0, complexity: 2, }, { id: 52, name: "npc_dota_hero_leshrac", name_loc: "Leshrac", name_english_loc: "Leshrac", primary_attr: 2, complexity: 1, }, { id: 53, name: "npc_dota_hero_furion", name_loc: "Nature's Prophet", name_english_loc: "Nature's Prophet", primary_attr: 2, complexity: 2, }, { id: 54, name: "npc_dota_hero_life_stealer", name_loc: "Lifestealer", name_english_loc: "Lifestealer", primary_attr: 0, complexity: 2, }, { id: 55, name: "npc_dota_hero_dark_seer", name_loc: "Dark Seer", name_english_loc: "Dark Seer", primary_attr: 2, complexity: 1, }, { id: 56, name: "npc_dota_hero_clinkz", name_loc: "Clinkz", name_english_loc: "Clinkz", primary_attr: 1, complexity: 2, }, { id: 57, name: "npc_dota_hero_omniknight", name_loc: "Omniknight", name_english_loc: "Omniknight", primary_attr: 0, complexity: 1, }, { id: 58, name: "npc_dota_hero_enchantress", name_loc: "Enchantress", name_english_loc: "Enchantress", primary_attr: 2, complexity: 2, }, { id: 59, name: "npc_dota_hero_huskar", name_loc: "Huskar", name_english_loc: "Huskar", primary_attr: 0, complexity: 1, }, { id: 60, name: "npc_dota_hero_night_stalker", name_loc: "Night Stalker", name_english_loc: "Night Stalker", primary_attr: 0, complexity: 1, }, { id: 61, name: "npc_dota_hero_broodmother", name_loc: "Broodmother", name_english_loc: "Broodmother", primary_attr: 1, complexity: 2, }, { id: 62, name: "npc_dota_hero_bounty_hunter", name_loc: "Bounty Hunter", name_english_loc: "Bounty Hunter", primary_attr: 1, complexity: 1, }, { id: 63, name: "npc_dota_hero_weaver", name_loc: "Weaver", name_english_loc: "Weaver", primary_attr: 1, complexity: 2, }, { id: 64, name: "npc_dota_hero_jakiro", name_loc: "Jakiro", name_english_loc: "Jakiro", primary_attr: 2, complexity: 1, }, { id: 65, name: "npc_dota_hero_batrider", name_loc: "Batrider", name_english_loc: "Batrider", primary_attr: 2, complexity: 2, }, { id: 66, name: "npc_dota_hero_chen", name_loc: "Chen", name_english_loc: "Chen", primary_attr: 2, complexity: 3, }, { id: 67, name: "npc_dota_hero_spectre", name_loc: "Spectre", name_english_loc: "Spectre", primary_attr: 1, complexity: 2, }, { id: 69, name: "npc_dota_hero_doom_bringer", name_loc: "Doom", name_english_loc: "Doom", primary_attr: 0, complexity: 2, }, { id: 68, name: "npc_dota_hero_ancient_apparition", name_loc: "Ancient Apparition", name_english_loc: "Ancient Apparition", primary_attr: 2, complexity: 2, }, { id: 70, name: "npc_dota_hero_ursa", name_loc: "Ursa", name_english_loc: "Ursa", primary_attr: 1, complexity: 1, }, { id: 71, name: "npc_dota_hero_spirit_breaker", name_loc: "Spirit Breaker", name_english_loc: "Spirit Breaker", primary_attr: 0, complexity: 1, }, { id: 72, name: "npc_dota_hero_gyrocopter", name_loc: "Gyrocopter", name_english_loc: "Gyrocopter", primary_attr: 1, complexity: 1, }, { id: 73, name: "npc_dota_hero_alchemist", name_loc: "Alchemist", name_english_loc: "Alchemist", primary_attr: 0, complexity: 1, }, { id: 74, name: "npc_dota_hero_invoker", name_loc: "Invoker", name_english_loc: "Invoker", primary_attr: 2, complexity: 3, }, { id: 75, name: "npc_dota_hero_silencer", name_loc: "Silencer", name_english_loc: "Silencer", primary_attr: 2, complexity: 2, }, { id: 76, name: "npc_dota_hero_obsidian_destroyer", name_loc: "Outworld Destroyer", name_english_loc: "Outworld Destroyer", primary_attr: 2, complexity: 2, }, { id: 77, name: "npc_dota_hero_lycan", name_loc: "Lycan", name_english_loc: "Lycan", primary_attr: 0, complexity: 2, }, { id: 78, name: "npc_dota_hero_brewmaster", name_loc: "Brewmaster", name_english_loc: "Brewmaster", primary_attr: 0, complexity: 3, }, { id: 79, name: "npc_dota_hero_shadow_demon", name_loc: "Shadow Demon", name_english_loc: "Shadow Demon", primary_attr: 2, complexity: 2, }, { id: 80, name: "npc_dota_hero_lone_druid", name_loc: "Lone Druid", name_english_loc: "Lone Druid", primary_attr: 1, complexity: 3, }, { id: 81, name: "npc_dota_hero_chaos_knight", name_loc: "Chaos Knight", name_english_loc: "Chaos Knight", primary_attr: 0, complexity: 1, }, { id: 82, name: "npc_dota_hero_meepo", name_loc: "Meepo", name_english_loc: "Meepo", primary_attr: 1, complexity: 3, }, { id: 83, name: "npc_dota_hero_treant", name_loc: "Treant Protector", name_english_loc: "Treant Protector", primary_attr: 0, complexity: 2, }, { id: 84, name: "npc_dota_hero_ogre_magi", name_loc: "Ogre Magi", name_english_loc: "Ogre Magi", primary_attr: 2, complexity: 1, }, { id: 85, name: "npc_dota_hero_undying", name_loc: "Undying", name_english_loc: "Undying", primary_attr: 0, complexity: 1, }, { id: 86, name: "npc_dota_hero_rubick", name_loc: "Rubick", name_english_loc: "Rubick", primary_attr: 2, complexity: 3, }, { id: 87, name: "npc_dota_hero_disruptor", name_loc: "Disruptor", name_english_loc: "Disruptor", primary_attr: 2, complexity: 2, }, { id: 88, name: "npc_dota_hero_nyx_assassin", name_loc: "Nyx Assassin", name_english_loc: "Nyx Assassin", primary_attr: 1, complexity: 2, }, { id: 89, name: "npc_dota_hero_naga_siren", name_loc: "Naga Siren", name_english_loc: "Naga Siren", primary_attr: 1, complexity: 2, }, { id: 90, name: "npc_dota_hero_keeper_of_the_light", name_loc: "Keeper of the Light", name_english_loc: "Keeper of the Light", primary_attr: 2, complexity: 2, }, { id: 91, name: "npc_dota_hero_wisp", name_loc: "Io", name_english_loc: "Io", primary_attr: 0, complexity: 3, }, { id: 92, name: "npc_dota_hero_visage", name_loc: "Visage", name_english_loc: "Visage", primary_attr: 2, complexity: 3, }, { id: 93, name: "npc_dota_hero_slark", name_loc: "Slark", name_english_loc: "Slark", primary_attr: 1, complexity: 2, }, { id: 94, name: "npc_dota_hero_medusa", name_loc: "Medusa", name_english_loc: "Medusa", primary_attr: 1, complexity: 1, }, { id: 95, name: "npc_dota_hero_troll_warlord", name_loc: "Troll Warlord", name_english_loc: "Troll Warlord", primary_attr: 1, complexity: 2, }, { id: 96, name: "npc_dota_hero_centaur", name_loc: "Centaur Warrunner", name_english_loc: "Centaur Warrunner", primary_attr: 0, complexity: 1, }, { id: 97, name: "npc_dota_hero_magnataur", name_loc: "Magnus", name_english_loc: "Magnus", primary_attr: 0, complexity: 2, }, { id: 98, name: "npc_dota_hero_shredder", name_loc: "Timbersaw", name_english_loc: "Timbersaw", primary_attr: 0, complexity: 2, }, { id: 99, name: "npc_dota_hero_bristleback", name_loc: "Bristleback", name_english_loc: "Bristleback", primary_attr: 0, complexity: 1, }, { id: 100, name: "npc_dota_hero_tusk", name_loc: "Tusk", name_english_loc: "Tusk", primary_attr: 0, complexity: 1, }, { id: 101, name: "npc_dota_hero_skywrath_mage", name_loc: "Skywrath Mage", name_english_loc: "Skywrath Mage", primary_attr: 2, complexity: 1, }, { id: 102, name: "npc_dota_hero_abaddon", name_loc: "Abaddon", name_english_loc: "Abaddon", primary_attr: 0, complexity: 1, }, { id: 103, name: "npc_dota_hero_elder_titan", name_loc: "Elder Titan", name_english_loc: "Elder Titan", primary_attr: 0, complexity: 2, }, { id: 104, name: "npc_dota_hero_legion_commander", name_loc: "Legion Commander", name_english_loc: "Legion Commander", primary_attr: 0, complexity: 1, }, { id: 106, name: "npc_dota_hero_ember_spirit", name_loc: "Ember Spirit", name_english_loc: "Ember Spirit", primary_attr: 1, complexity: 2, }, { id: 107, name: "npc_dota_hero_earth_spirit", name_loc: "Earth Spirit", name_english_loc: "Earth Spirit", primary_attr: 0, complexity: 3, }, { id: 109, name: "npc_dota_hero_terrorblade", name_loc: "Terrorblade", name_english_loc: "Terrorblade", primary_attr: 1, complexity: 2, }, { id: 110, name: "npc_dota_hero_phoenix", name_loc: "Phoenix", name_english_loc: "Phoenix", primary_attr: 0, complexity: 2, }, { id: 111, name: "npc_dota_hero_oracle", name_loc: "Oracle", name_english_loc: "Oracle", primary_attr: 2, complexity: 3, }, { id: 105, name: "npc_dota_hero_techies", name_loc: "Techies", name_english_loc: "Techies", primary_attr: 2, complexity: 2, }, { id: 112, name: "npc_dota_hero_winter_wyvern", name_loc: "Winter Wyvern", name_english_loc: "Winter Wyvern", primary_attr: 2, complexity: 2, }, { id: 113, name: "npc_dota_hero_arc_warden", name_loc: "Arc Warden", name_english_loc: "Arc Warden", primary_attr: 1, complexity: 3, }, { id: 108, name: "npc_dota_hero_abyssal_underlord", name_loc: "Underlord", name_english_loc: "Underlord", primary_attr: 0, complexity: 2, }, { id: 114, name: "npc_dota_hero_monkey_king", name_loc: "Monkey King", name_english_loc: "Monkey King", primary_attr: 1, complexity: 2, }, { id: 120, name: "npc_dota_hero_pangolier", name_loc: "Pangolier", name_english_loc: "Pangolier", primary_attr: 1, complexity: 2, }, { id: 119, name: "npc_dota_hero_dark_willow", name_loc: "Dark Willow", name_english_loc: "Dark Willow", primary_attr: 2, complexity: 2, }, { id: 121, name: "npc_dota_hero_grimstroke", name_loc: "Grimstroke", name_english_loc: "Grimstroke", primary_attr: 2, complexity: 2, }, { id: 129, name: "npc_dota_hero_mars", name_loc: "Mars", name_english_loc: "Mars", primary_attr: 0, complexity: 1, }, { id: 126, name: "npc_dota_hero_void_spirit", name_loc: "Void Spirit", name_english_loc: "Void Spirit", primary_attr: 2, complexity: 2, }, { id: 128, name: "npc_dota_hero_snapfire", name_loc: "Snapfire", name_english_loc: "Snapfire", primary_attr: 0, complexity: 1, }, { id: 123, name: "npc_dota_hero_hoodwink", name_loc: "Hoodwink", name_english_loc: "Hoodwink", primary_attr: 1, complexity: 2, }, { id: 135, name: "npc_dota_hero_dawnbreaker", name_loc: "Dawnbreaker", name_english_loc: "Dawnbreaker", primary_attr: 0, complexity: 1, }, { id: 136, name: "npc_dota_hero_marci", name_loc: "Marci", name_english_loc: "Marci", primary_attr: 0, complexity: 2, }, ], }, }, };
const container = document.querySelector("#photo");
data.result.data.heroes.forEach(item => {
const li = document.createElement("li");
li.classList.add("flex-item");
const heroName= item.name_loc;
const linkparameter = item.name
.toLowerCase()
.replace("npc_dota_hero_","");
li.innerHTML = `
<img
src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/${linkparameter}.png"
alt="${heroName}"
/>
<li>${heroName}</li>
`;
container.appendChild(li);
});body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.flex-container {
text-align: center;
max-width: 1200px;
margin: 10em auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: center;
column-gap: 20px;
}
.flex-item {
background: tomato;
width: 200px;
height: 150px;
margin-top: 20px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
transition: all 0.5s ease-in-out;
}
.flex-item:hover {
transform: scale(1.4);
transition: all 0.4s ease;
cursor: pointer;
}
img {
width: 200px;
height: 150px;
}
.balancer {
height: 0;
width: 200px;
margin: 0px 5px;
visibility: hidden;
}
.hover-value {
font-size: 0px;
-webkit-transition: font-size 1s;
transition: font-size 1s;
}
button:hover .hover-value {
font-size: inherit;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width= , initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<div>
<ul id="photo" class="flex-container"></ul>
</div>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
</body>
</html>