CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Christoph
Christoph

Reputation: 127

CSS: Text behind bootstrap 3 thumbnail

I have a few issues with the thumbnails from bootstrap 3. You can see the code here: http://amazing-vt.de/#portfolio

When you hover an image, you can see the text behind this image. Now I want to center this text, but padding doesn't affect any of these links. Also I have set a height for the <a>with the class thumbnail. How do I have to change my css, so I don't need to set a height? How can I get the text centered? And can anyone explain me, why the image is flickering on hover?

Upvotes: 1

Views: 810

Answers (2)

ckuijjer
ckuijjer

Reputation: 13814

I would suggest you to try to use as much of the bootstrap classes as possible, for example .img-responsive makes an image scale to the width of its container.

Create your own .thumb element that contains a .thumb__image for the image and a .thumb__text for the overlay text. The .thumb_image contains the image and uses normal positioning, the .thumb__text has position: absolute with all coordinates set to zero to make it as the image.

Inside the .thumb__text there is a thumb__text-inner that uses the vertical centering technique from css-tricks.com/centering-css-complete-guide/ to center the text.

Make sure that all images have the same aspect ratio and that the text fits inside the dimensions of the image.

See the example below. I've added a negative margin of -15px to offset Bootstraps grid gutter which might be unwanted.

.thumb {
  position: relative;
  margin: 0 -15px; // offsetting the grid
}

.thumb__text {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(39, 174, 96, .5);
  color: #fff;
}

.thumb__text-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.thumb:hover .thumb__text {
  z-index: 1;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
      <div class="col-sm-4">
        <div class="thumb">
          <img src="http://placekitten.com/800/400" class="img-responsive thumb__image" />
          <div class="thumb__text">
            <div class="thumb__text-inner">
              Omg! What a lovely kitten that is!
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumb">
          <img src="http://placekitten.com/g/800/400" class="img-responsive thumb__image" />
          <div class="thumb__text">
            <div class="thumb__text-inner">
              Omg! What a lovely kitten that is!
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</div>

Upvotes: 1

Vipul Hadiya
Vipul Hadiya

Reputation: 882

after removing <code>padding:0px !important</code> you will get like this

Stylesheet.css line : 326 Remove padding:0px !important and then try whatever possible changes

also remove padding-top:25% from same and Bootstrap.css 4585

padding:0px
margin-bottom:16px;

and your design will look as you expect. I have tested

Upvotes: 1

Related Questions