Content Block with Image and Centered Text

Responsive overview widget/block with centered text and image

Below you can find an example of simple responsive content block with image and centered text.This block can be integrated in products or articles overview page, related content area or any other place where you need such content structure. It can be used together with any HTML/CSS Framework, like Twitter Bootstrap, Zurb Foundation, Skeleton and others.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="ct-block">
<div class="image-container">
<img class="block-image" src="/images/frozen-bubble-400x175.png">
</div>
<div class="block-content">
<h2 class="block-header">Look Around</h2>
<p>
How to make great setup to work productively from home
</p>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #fff;
}

.container {
padding: 0 20px;
max-width: 400px;
margin: 30px auto 0;
}

/* Centered Text Block Styles */

.ct-block {
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
margin-bottom: 30px;
}

.ct-block .block-image {
width: 100%;
border-radius: 8px 8px 0 0;
}

.ct-block .block-header {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
}

.ct-block .block-content {
padding: 15px 20px 25px;
font-size: 15px;
color: #999;
line-height: 23px;
}

.ct-block .block-header {
text-align: center;
}

.ct-block .block-content p {
text-align: center;
font-family: georgia;
font-style: italic;
font-size: 17px;
letter-spacing: 0.5px;
}
CSS
Browser support:
           
8+