CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme | CODE INSIDE)

<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>

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%

    }