Не удается получить заголовок за пределами поля изображения на простой странице начальной загрузки

Question

У меня есть простая страница, где я показываю логотип и заголовок внизу в затененной коробке.

Проблема в том, что я не могу получить заголовок вне затененного поля.

Это демонстрация страницы

.name {
	color: #1b1a1a;
  margin-top: 45px;
	font-size: 16px;
	text-align: center;
}

.shadow {
    padding: 30px;
    margin-right: 60px;
    box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.shadow img {
	margin: 0 auto;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">    
    <div class="row equal">
            <div class="col-md-2 shadow">
              <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive" alt="Image">
              <div class="name">Cambian networks</div>
            </div>
            <div class="col-md-2 shadow"> 
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive" alt="Image"><br/>
              <div class="name"><p>Android</p></div>
            </div>
    </div>
</div>

Я хочу Cambian networks и Android снаружи (ниже) коробки.

Вот также демонстрационная версия Jsfiddle https://jsfiddle.net/7j9usa05/

Answer 1

Удалите тень от родителя и передайте ее тегу img. Это должно решить вашу проблему.

.name {
  color: #1b1a1a;
  margin-top: 45px;
  font-size: 16px;
  text-align: center;
}

.shadow {
  padding: 10px;
  /* margin-right: 60px; */
  box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.shadow img {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row equal">
    <div class="col-md-2">
      <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive shadow" alt="Image">
      <div class="name">Cambian networks</div>
    </div>
    <div class="col-md-2">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive shadow" alt="Image">
      <div class="name">
        <p>Android</p>
      </div>
    </div>
  </div>
</div>

Answer 2

Измените свой HTML & CSS

<div class="container">    
    <div class="row equal">
            <div class="col-md-2">
            <div class="shadow">
              <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive" alt="Image">
                          </div>
              <div class="name">Cambian networks</div>
            </div>
            <div class="col-md-2"> 
            <div class="shadow">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive" alt="Image">
                          </div>
              <div class="name"><p>Android</p></div>
            </div>
    </div>
</div>

https://jsfiddle.net/xLg745s6/

Answer 3

В этом случае вам нужно только указать "box-shadow" на соответствующем элементе.Для вышеупомянутого сценария, попробуйте поместить box-shadow только на изображение.Обновленная скрипка в "https://jsfiddle.net/f14awjks/" Соответствующие обновления стилей:

 .shadow {
    padding: 30px;
    margin-right: 60px;
    background-color: #ffffff;
}

.shadow img {
    margin: 0 auto;
    box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
}