opacity overlap label css(essence)

opacity-overlap-label.css

.base{
    position:relative;
}
.base .overlapcaption{
    position: absolute;
   
    background-color: rgba( 222, 200, 200, 0.8 ); 
    /*キャプションの形と位置*/
     top: calc(100% - 12px);
     top: -webkit-calc(100% - 12px);
    left: 0; 
    width: 100%;
}

opacity-overlap-label.html

 <div class="base">
 		<img src="https://s0.wordpress.com/mshots/v1/https%3A%2F%2Fblender.jp%2F?w=250&#038;h=250"
                     alt="blender" width="250" height="250" class="alignnone" />
                 <div class="overlapcaption">
                      イメージキャプション
                 </div>
	</div>

moving sample & explain:
http://edutainment-fun.com/hidemaru/it/%E7%94%BB%E5%83%8F%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%AE%E4%B8%8A%E3%81%AB%E3%80%81%E3%82%AD%E3%83%A3%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%80%8F%E6%98%8E%E3%83%A9%E3%83%99%E3%83%AB%E3%81%A7_2416.html