CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme

<div class="drogon"><img src="drogon.png" /></div>
<div class="house-lists">
<div class="house" style="background-image: url('stark.png');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-stark.png" /></div>
<div class="house-name">Stark</div>
</div>
</div>
<div class="house" style="background-image: url('targaryen.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-targaryen.png" /></div>
<div class="house-name">Targaryen</div>
</div>
</div>
<div class="house" style="background-image: url('lannister.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-lannister.png" /></div>
<div class="house-name">Lannister</div>
</div>
</div>
<div class="house" style="background-image: url('baratheon.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigili-baratheon.png" /></div>
<div class="house-name">Baratheon</div>
</div>
</div>
<div class="house" style="background-image: url('tyrell.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-tyrell.png" /></div>
<div class="house-name">Tyrell</div>
</div>
</div>
<div class="house" style="background-image: url('martell.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-martell.png" /></div>
<div class="house-name">Martell</div>
</div>
</div>
<div class="house" style="background-image: url('tully.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-tully.png" /></div>
<div class="house-name">Tully</div>
</div>
</div>
<div class="house" style="background-image: url('arryn.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-arryn.png" /></div>
<div class="house-name">Arryn</div>
</div>
</div>
<div class="house" style="background-image: url('greyjoy.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-greyjoy.png" /></div>
<div class="house-name">Greyjoy</div>
</div>
</div>
</div>

How To See the Complete CSS of an Element in Webpage

Simple Image Slider Using Only CSS – EASY

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

body {
background: url(https://cdnb.artstation.com/p/assets/images/images/012/370/613/large/steve-lund-castle-color2.jpg?1534439770) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}

.drogon {
position: absolute;
top: 0;
right: 0;
}

.house-lists {
display: flex;
}

.house {
position: relative;
overflow: hidden;
width: 70px;
height: 550px;
background-size: auto 105%;
background-position: center;
border-radius: 60px;
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);

min-width: 100px;
transition: .5s ease;
margin: 15px;
}

.sigil {
min-width: 100px;
text-align: center;
position: absolute;
bottom: 10px;
}

.sigil img {
filter: brightness(0) invert(1);
max-width: 80px;
max-height: 60px;
}

.house:hover {
min-width: 600px;
background-size: auto 100%;
border-radius: 10px;
}

.house-inner {
position: relative;
height: 100%;
display: flex;
align-items: flex-end;
}

.house::before {
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
transition: .5s ease;
}
.house:hover::before{
background: none;
}

.house-name {
color: #fff;
transform: rotate(-90deg);
font-size: 50px;
letter-spacing: 2px;
transition: .5s ease;
max-width: 100%;
margin-bottom: 120%;
}
.house:hover .house-name{
transform:rotate(0deg);
margin-bottom: 3%;
margin-left:20%
}