Using gwt UiBinder to implement Slide in Overlay from the Right

Question

I am trying to implement the Slide in Overlay from the Right by UiBinder. The html and css version is just like tutorial below. I only change the html img to gwt image widget. How come the <div class="text">Hello World</div> is put right below the image, instead of overlaying the image and sliding out when hover?

https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_slideright

Thanks

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
    .container {
        position: relative;
        width: 50%;
    }

    .image {
        display: block;
        width: 200px;
        height: 200px;
    }

    .overlay {
        position: absolute;
        bottom: 0;
        left: 100%;
        right: 0;
        background-color: #008CBA;
        overflow: hidden;
        width: 0;
        height: 100%;
        transition: .5s ease;
    }

    .container:hover .overlay {
        width: 100%;
        left: 0;
    }

    .text {
        white-space: nowrap; 
        color: white;
        font-size: 20px;
        position: absolute;
        overflow: hidden;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
</ui:style>


<g:HTMLPanel>
<div class="container">
    <!-- img src="img_avatar.png" alt="Avatar" class="image" -->
    <g:Image ui:field="image" addStyleNames='{style.image}'/>
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>
</g:HTMLPanel>  
</ui:UiBinder> 

Thanks