如何在引导程序中使用img圆圈图像在悬停时添加标题

Question

I have a grid of responsive ing-circle link images in bootstrap which I would like to have caption appear on hover.

I cannot figure out a way to do this without distorting the shape of the circular image, or have it appear outside the circle.

My CSS:

.pic{
    -webkit-filter:   saturate(50%) opacity(80% ) sepia(15%) grayscale(15%);

}

.pic img{
  -webkit-transition: all 0.5s linear;
          transition: all 0.5s linear;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

.pic:hover img{
-webkit-filter:  opacity(00% )brightness(120%);
  -webkit-transform: scale3d(1.2, 1.2, 1);
          transform: scale3d(1.2, 1.2, 1);
}


.circular img {
    margin: 0 auto;
    border: 6px solid  #a9c3b1;
    box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
}

img {
display: inline-block;
height: auto;
max-width: 100%;
}




#hatch {
    background-image: url("../img/hatch.png");
    opacity: 1;

}

#nakashima {
    background-image: url("../img/carat.png");
    opacity: 1;

}

#areel {
    background-image: url("../img/animation.png");
    opacity: 1;
}

I have tried variations on this:

.figcaption {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    padding: 50% 0;
    overflow: hidden;
    color: black

    opacity: 1;

    z-index: 10
}

here is my HTML:

div class="row ">

                <div class="col-sm-3 col-sm-offset-1">
                    <div class="circular pic img-circle" id='hatch'>
                        <h3 class="figcaption">hatch</h3>
                        <a href="hatch.html"><img src="img/hatch.png" class="img-responsive img-circle" alt="" >
                        </a>
                    </div>
                </div>

               <div class="col-sm-3">
                    <div class="circular pic img-circle" id='nakashima'>
                        <a href="hatch.html"><img src="img/carat.png" class="img-responsive img-circle" alt="" >
                        </a>    
                        </div>
                </div>

                <div class="col-sm-3">
                    <div class="circular pic img-circle" id='areel'>
                        <a href="reel.html"><img src="img/animation.png" class="img-responsive img-circle" alt="">
                        </a>
                    </div>
                </div>

        </div>

ETA: I have made a jsfiddle for demo: https://jsfiddle.net/4btssg6y/ compare the results of the first circle where text has been added with that of the second with no text.

Answer 1

Well I think I figured it out. But I'd love to hear if there is a nicer way to do this.

HTML:

<section id="design">

<div class="row">

            <div class="col-sm-3 col-sm-offset-1">
                <div class="circular pic img-circle" id='hatchBkgd'>

                    <h3>Hatch</h3>

           <p>Typography, Print Design</p>
                    <a href="hatch.html"><img src="http://i.imgur.com/IlW9pin.png" class="img-responsive img-circle fig">
                    </a>
                </div>

            </div>

           <div class="col-sm-3">
                <div class="circular pic img-circle" id='nakashimaBkgd'>

                    <h3>Nakashima</h3>
                     <p>Paralax Scrolling Site with SVG animation</p>
                    <a href="hatch.html"><img src="http://i.imgur.com/Xxg1WaU.png" class="img-responsive img-circle fig" >
                    </a>    
                    </div>
            </div>

            <div class="col-sm-3">
                <div class="circular pic img-circle" id='areelBkgd'>
                    <h3>Animation</h3>
                     <p>Lightwave 3D character design and visual effects</p>
                    <a href="reel.html"><img src="http://i.imgur.com/bnYtfkB.png" class="img-responsive img-circle fig" alt="">
                    </a>
                </div>
            </div>

    </div>

                </section>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .pic {
    -webkit-filter: saturate(50%) opacity(80%) sepia(15%) grayscale(15%);
}
.pic img {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.pic:hover img {
    -webkit-filter: opacity(00%)brightness(120%);
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
}
.circular img {
    margin: 0 auto;
    border: 6px solid #a9c3b1;
    box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
}
img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}
.fig {
    position: relative;
    z-index: 100;
}

#hatchBkgd {
    background-image: url("http://i.imgur.com/I2mQA0o.png");
    opacity: 1;
    position: relative;
    z-index: 1;

}



#nakashimaBkgd {
    background-image: url("http://i.imgur.com/UbID6dY.png");
    opacity: 1;
     position: relative;
    z-index: 1;
}

#areelBkgd {
    background-image: url("http://i.imgur.com/b2M3GBX.png");
    opacity: 1;
     position: relative;
    z-index: 1;
}



#design h3{
    position: absolute;
    z-index: 2;
    -webkit-filter:   saturate(50%) opacity(80% ) sepia(15%) grayscale(15%);
    margin: 0;
    margin-top:12vh;
    margin-left: 2vw;
    color: #fff;
    letter-spacing: .1em;
    font-weight: 100;
}




#design p{
    position: absolute;
    z-index: 2;
    -webkit-filter:   saturate(50%) opacity(80% ) sepia(15%) grayscale(15%);
    margin: 0;
    margin-top: 17.25vh;
    margin-left: 2vw;
    color: #fff;
    letter-spacing: .1em;
    font-weight: 100;
    display: block;
    border-top: 1px solid white;
    padding-right: 3vw;
    padding-bottom: 1vw;
}

My updated jsfiddle: https://jsfiddle.net/4btssg6y/1/