JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div class="img-wrap">
    <img src="http://www.verbo10.com/wp-content/uploads/mariu-portada9x.jpg" alt="Dr. Maria Eugenia Farias" class="featured-thumbnail " />
    <p>Hover over the image!</p>
</div>
<div class="overlay">
    <ul>
        <li>Sone text</li>
        <li>Some other text</li>
        <li>Etc.</li>
    </ul>
</div>

CSS

.img-wrap{
    overflow:hidden;
    position:relative;
}
.img-wrap p{
    color:#000;
    font:bold 40px sans-serif;
    left:20%;
    opacity:0.6;
    position:absolute;
    text-shadow:1px 1px 0 #fff;
    text-transform:uppercase;
    top:45%
}
.img-wrap img{
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 8s;
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 8s;
	-ms-transition-property: -ms-transform;
	-ms-transition-duration: 8s;
	-o-transition-property: -o-transform;
	-o-transition-duration: 8s;
	transition-property: transform;
	transition-duration: 8s;
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;
}
.img-wrap img:hover{
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
.overlay{
    background:#666;
    height:30px;
    left:0;
    position:fixed;
    top:0;
    width:100%;
}
.overlay ul li{
    color:#fff;
    display:block;
    float:left;
    font:bold 12px sans-serif;
    margin:7px 10px 0;
    text-transform:uppercase;
}