JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="http://www.chinadaily.com.cn/world/images/attachement/jpg/site1/20120806/d4bed9d534551189e67329.jpg"></script>
<div class="photo">
  <div class="image">
    <img src="http://www.chinadaily.com.cn/world/images/attachement/jpg/site1/20120806/d4bed9d534551189e67329.jpg" alt=""/>
  </div>
  <div class="titre">
    Comme ils sont minions ^^
  </div>
</div>

CSS

.photo {
  position:relative;
  background:#000;
  border:#bbb 2px solid;
  width:400px;
  height:254px;
}

.image {
  height:100%;
  width:auto;
}

.image img {
  width:100%;
  height:auto;
}

.titre {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:20px;
  background:rgba(250,250,250,0.4);
  font-family:arial, sans-serif;
  display:none;
}

.image:hover~.titre {
  display:block;
}