Services Page with Image, Description and More - Mike Matenkosky

Services Page with Image, Description and More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam velit est, viverra blandit mollis sed, aliquet nec elit. Quisque fringilla purus non facilisis iaculis. Etiam vel lectus arcu. Nam varius ut enim vitae venenatis.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam velit est, viverra blandit mollis sed, aliquet nec elit. Quisque fringilla purus non facilisis iaculis.

Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex, eu euismod mauris urna sed ligula. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, in blandit lorem.

I’m calling this a Services Page, but it’s basically a page that lists an abreviated list that displays an image, a summary, and a call to action. You need one HTML/CSS block and add the information below. Just edit the image, image size (width="350" height="233") link, and description. In addition to changing the image size, you’ll need to edit the CSS width: 350px; to at least the same width of the images.

If you notice, the middle item/photo is different. If you prefer having the title outside of the image, you can do that too.

HTML

	
<div class="grid-wrapper">

	<div class="grid-item">
	
		<div class="image-wrap">	
			<a href="Link-here">			
				<img src="Image.jpg" alt="Alt Text Here" width="350" height="233" />				
				<h3 class="title">Title</h3>				
			</a>			
		</div>	
		
		<div class="inner-wrap">		
			<p>Text here.</p>
		</div>	
		
		<div class="footer-wrap">		
			<a href="Link-here">Read More &raquo;</a>
		</div>
	
	</div>

	<div class="grid-item">
	
		<div class="image-wrap">	
			<a href="Link-here">			
				<img src="Image.jpg" alt="Alt Text Here" width="350" height="233" />				
			</a>			
		</div>	
		
		<div class="inner-wrap">
			<h3 class="title">Title</h3>
			<p>Text here.</p>
		</div>	
		
		<div class="footer-wrap">		
			<a href="Link-here">Read More &raquo;</a>
		</div>
	
	</div>

	<div class="grid-item">
	
		<div class="image-wrap">	
			<a href="Link-here">			
				<img src="Image.jpg" alt="Alt Text Here" width="350" height="233" />				
				<h3 class="title">Title</h3>				
			</a>			
		</div>	
		
		<div class="inner-wrap">		
			<p>Text here.</p>
		</div>	
		
		<div class="footer-wrap">		
			<a href="Link-here">Read More &raquo;</a>
		</div>
	
	</div>
	
</div>

CSS


/**
* Services with Image, Description and See More Link 
***************************************************/
.grid-wrapper,
.image-wrap {
	display: flex;
	flex-wrap: wrap;
	}		
	
.grid-wrapper  {
	justify-content: space-between;
	}	
	
.grid-item {
	width: 350px; /* Change width to match image width or more */
	margin: 0 auto 1.5rem;
	padding: 0 0 1.5rem;
	display: flex;
	flex-flow: column nowrap;
	background: #f7f7f7;
	border: 1px solid #e3e3e3;	
	}	

.image-wrap {
	margin: 0;
	position: relative;
	display: inline-block;
	align-self: center;
	justify-content: center;
	}	
	
	.image-wrap:hover{ opacity: .9; }
	
	.image-wrap .title {
		position: absolute; 
		text-align: center; 
		margin: auto;
		top: 50%; 
		left:  0; 
		right: 0; 
		padding: 10px 0;
		background: rgba( 0, 0, 0, .8 );
		color: #fff;
		transform: translate( 0, -50% ); 
		}	
	
.inner-wrap { 
	padding: 10px;
	margin: 10px;
	}	
	
	.inner-wrap .title {
		color: #000;
		margin: 0 0 1.5rem;;
	}
	
.footer-wrap {
	margin-top: auto;
	text-align: center;
	padding: 10px 0;
	}
 
	.footer-wrap a {
		padding: 1rem 2rem;
		text-decoration: none;
		font-size: 1.25rem;		
		background-color: #151515;
		color: #ccc;
		}	

		.footer-wrap a:hover {
			background-color: #353535;
			color: #fff;
			}
			
	/* Transitions */
.image-wrap,
.footer-wrap a { transition-duration: 0.4s; }	

Powered by SmugMug Log In