CSS/HTML Images

pidde85Jan 3, 2017

Hi, I have one thing I am struggle with. How do you achieve this: http://prntscr.com/dqtgo0
I want to have 3 pictures positioned as illustrated. Top photo I point, then the text is underlined and the picture a little darker.
But I did not manage it and not getting the pictures nicely positioned as the example above.

Please help me with this.

Greetings

SemiColonWebSTAFFJan 4, 2017

Hello,

Consider using the following HTML code:

<div class="row justified-banners clearfix">

	<div class="col-md-12">
		<a href="#" style="background: url('images/parallax/1.jpg') no-repeat center center; background-size: cover;">
			<div class="vertical-middle dark center">
				<div class="heading-block nomargin noborder">
					<h3 class="capitalize t500">California</h3>
					<span style="margin-top: 5px; font-size: 17px;">23 Properties</span>
				</div>
			</div>
		</a>
	</div>
	<div class="col-md-6">
		<a href="#" style="background: url('images/parallax/1.jpg') no-repeat center center; background-size: cover;">
			<div class="vertical-middle dark center">
				<div class="heading-block nomargin noborder">
					<h3 class="capitalize t500">New York</h3>
					<span style="margin-top: 5px; font-size: 17px;">12 Properties</span>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#" style="background: url('images/parallax/1.jpg') no-repeat center center; background-size: cover;">
			<div class="vertical-middle dark center">
				<div class="heading-block nomargin noborder">
					<h3 class="capitalize t500">San Francisco</h3>
					<span style="margin-top: 5px; font-size: 17px;">8 Properties</span>
				</div>
			</div>
		</a>
	</div>

</div>

and then the following CSS Code:

.justified-banners [class^=col-] {
	position: relative;
	margin-bottom: 30px;
}

.justified-banners [class^=col-] > a {
	display: block;
	position: relative;
	height: 250px;
	background-color: #EEE;
}

.justified-banners [class^=col-] img { display: block; }

.justified-banners [class^=col-] > a:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

.justified-banners [class^=col-] > a:hover:before { opacity: 1; }

You can change the Positioning of the Text based to your needs.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.