html - 仅使用 HTML 和 CSS 显示图像标题

Question

我正在尝试在图像上显示标题。

这是我的HTML

            <div class="image-hover">               

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      


            </div>

这是我的 CSS :

.image-hover {
    overflow: hidden;
}

.image-hover .image-block {
    width: 234px;
    height: 100px;  
    display: inline-block;
    border: 1px solid #666666;

}

.image-hover .image-block img {
    width: 230px;
    height: 100px;  
    border: 2px solid #fff;
}

.details, .image-backdrop {
    float: left;
}

.details h4:after {
    display: inline-block;
  content:" ";
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #666666;
  margin: 0 10px;
}

这是我的 JsFiddel

我的问题是如何让图片的标题位于图片上方？非常欢迎任何意见。

谢谢。

Answer 1

你应该使用position:relative;到容器和position:absolute;到你想要在图像上的子容器，它的样式是你想要的

http://jsfiddle.net/ADMvd/2/