186 views
CSS
1.card { 2 width: 200px; 3 height: 250px; 4 background: #262626; 5} 6 7.GameIcon { 8 transform: translate(-80px,-50px); 9 position: absolute; 10 width: 200px; 11 height: 200px; 12 transition: 0.3s; 13} 14 15.GameImg { 16 width: 100%; 17 height: 100%; 18} 19 20.Gfooter { 21 width: 100%; 22 height: 0%; 23 background-color: #262626; 24 border-radius: 10px; 25 transition: all 0.3s; 26} 27 28.Name { 29 transform: translate(10px,200px); 30 position: absolute; 31 background-color: transparent; 32 font-weight: bold; 33 font-size: 18px; 34 transition: 0.3s; 35 color: #ff5858; 36} 37 38.SmallIcon { 39 width: 0px; 40 height: 0px; 41 transform: translate(10px,10px); 42 border-radius: 10px; 43 background-color: #ff5858; 44 transition: 0.2s; 45} 46 47.Descripion { 48 padding: 10px; 49 position: absolute; 50 transform: translate(0px,20px); 51 opacity: 0%; 52 color: #ff5858; 53 font-weight: bold; 54 font-size: 15px; 55} 56 57.StarIcon { 58 transform: translate(-0px,25px); 59 width: 20px; 60 fill: #ebd300; 61} 62 63.Stars { 64 position: absolute; 65 color: white; 66 font-size: 15px; 67 font-weight: bold; 68 transform: translate(80px,-70px); 69} 70 71.GameImg:hover .Descripion { 72 opacity: 100%; 73} 74 75.GameImg:hover .Gfooter { 76 width: 100%; 77 height: 100%; 78} 79 80.GameImg:hover .SmallIcon { 81 width: 60px; 82 height: 60px; 83} 84 85.GameImg:hover .Name { 86 transform: translate(75px,-235px); 87} 88 89.GameImg:hover .GameIcon { 90 transform: translate(100px,-160px); 91} 92
HTML
1<div class="card"> 2 <div class="GameImg"> 3 4 <div class="Gfooter"> 5 <div class="SmallIcon"></div> 6 <span class="Stars"><svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="StarIcon"> 7 <g stroke="none" fill="#ebd300" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)"> 8 <path d="M210 405 l-33 -85 -83 0 c-45 0 -85 -4 -88 -9 -3 -5 23 -33 59 -62 36 -29 65 -60 65 -68 0 -9 -9 -48 -20 -86 -11 -38 -20 -71 -20 -72 0 -12 35 4 85 37 33 22 67 40 75 40 8 0 42 -18 75 -40 50 -33 85 -49 85 -37 0 1 -9 34 -20 72 -11 38 -20 77 -20 86 0 8 29 39 65 68 36 28 63 56 60 62 -4 5 -44 9 -90 9 l-83 0 -33 85 c-17 47 -35 85 -39 85 -4 0 -22 -38 -40 -85z"></path> 9 </g> 10 </svg> 11 5/5</span> 12 <span class="Descripion">This is Descripion of The Game</span> 13 </div> 14 15 <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="GameIcon"> 16 <g stroke="none" fill="#ff5858" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)"> 17 <path d="M427 471 c-2 -11 -36 -35 -78 -57 -62 -33 -77 -46 -94 -81 -14 -30 -24 -41 -35 -36 -64 25 -90 27 -117 7 -58 -42 -115 -185 -99 -248 19 -76 81 -73 195 9 19 14 41 25 50 25 9 0 43 -18 75 -40 33 -22 70 -43 83 -46 64 -16 101 30 89 113 -7 56 -62 159 -99 187 -28 20 -56 18 -121 -9 -16 -7 -17 -5 -11 16 12 39 36 60 102 90 56 25 83 50 83 78 0 18 -17 12 -23 -8z m-41 -252 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-236 -14 c0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 -7 -15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 8 7 15 15 15 8 0 15 7 15 15 0 8 7 15 15 15 8 0 15 -7 15 -15z m196 -26 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m80 0 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-40 -40 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z"></path></g></svg> 18 <span class="Name">Game Name</span> 19 </div> 20</div>