.frame {
  display: inline-block;
  position: relative;
}
.frame:after {
  position: absolute;
  content: "";
  box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */
  transform: rotate(3deg); /* 回転させる */
  right: 5px;
  left: auto;
  top: auto;
  bottom: 15px;
  z-index: -1;
  width: 50%;
  height: 20%;
}


#sample2 { 
  width: 100%; 
  height: 100%; 
} 
#sample2 img { 
  width: 100%; 
  height: 100%; 
  position: relative; /* 親要素を基点に配置 */ 
   overflow:hidden;
   top: 0; 
  left: 0; 
  z-index: 1; /* 一番下に配置 */ 
} 
#sample2 a:hover img { 
  opacity: 0.8; /* 透明度80%を指定 */ 
  filter: alpha(opacity=80); /* for IE */ 
  background: white; 
} 
#sample2 h2 { 
  margin: 0; 
  padding: 10px; 
  width: 100; 
  position: relative;    /* 親要素を基点に配置 */ 
  overflow:hidden;
  top: -350px; 
  left: 0; 
  background-color: rgba(0, 0, 0, 0.5); /* 背景黒で透明度50% */ 
  color: white; 
  z-index: 2;  /* 画像の上に配置 */ 
  font-size: 100%; 
} 
#sample2 p { 
  margin: 0; 
  padding: 10px; 
  width: 98%; 
  position: relative;  /* 親要素を基点に配置 */ 
  overflow:hidden;
  bottom: 0;
  top:-78px; 
  left: 0; 
  background-color: rgba(255, 255, 255, 0.5); /* 背景白で透明度50% */ 
  line-height: 1.5em; 
  color: black;
  text-align: right; 
  z-index: 3; /* 一番上に配置 */ 
  font-size: 90%; 
}