Как выделить текст внизу?

Question

У меня есть этот сайт:

link

КОД HTML:

<div class="col-md-4 tab-bottom"> 
        <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/2-380x380.png" class="attachment-news wp-post-image" alt="2"> </div> 
         <div class="tab-bottom-content" style="display: block;"> 
          <div> 
          <p class="title_bottom">SED PERSPICIATIS</p> 
          <p class="content_bottom"></p><p>Sed ut perspiciatis unde omnis iste natus error sit<br> 
voluptatem accusantium doloremque laudantium,<br> 
totam rem aperiam, eaque ipsa quae ab illo inventore<br> 
veritatis et quasi architecto beatae vitae dicta sunt<br> 
explicabo.</p> 
<p></p> 
          </div> 
         </div> 
       </div> 

КОД CSS:

.tab-bottom { 
    position: relative; 
    height: 400px; 
} 
.tab-bottom-img { 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    height: 100%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
.tab-bottom-img img{ 
    width:100%; 
    height: 100%; 
    /* opacity: 0.5; */ 
} 
.tab-bottom:hover{ 
    opacity: 0.5; 
} 

К сожалению шрифт не может видеть очень хорошо ... Я бы хотел, чтобы на картинке низкий ..

Шрифт используется: Archivo Narrow/Bold за титул

Можете ли вы дать мне пожалуйста, как решить эту проблему? Откуда это?

Заранее благодарен!

Answer 1

Добавьте этот код в ваш CSS:

.title_bottom, .content_bottom { 
    opacity: 1.0; 
} 

так, что в текстовой области шрифт полноцветный и твердый, а не полупрозрачный.

Вы также можете улучшить эту часть:

<p class="content_bottom"></p><p>Sed ut 

, потому что класс только применяются к первому пустому пункту.

Answer 2

Вам нужно установить полную непрозрачность содержимого внутри конкретного подразделения. Попробуйте это

.content_bottom , .title_bottom{ 
    opacity: 1.0; 
    color:red; //the code for the color you have used in the title 
}