<p class="wrap">

	Take a look at the second image below
	<img src="https://images.unsplash.com/photo-1528368926401-c5a53c66e2b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.
	Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia.

	<img class="img-fullscreen extra" src="https://images.unsplash.com/photo-1528368926401-c5a53c66e2b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

	Mauris est dolor, consequat sit amet ante ac, lobortis accumsan dui. In hac habitasse platea dictumst. Aenean nec velit et nibh cursus blandit. Nam nec augue quis nulla hendrerit consectetur a accumsan nulla.
	Aliquam ac dolor id nulla lobortis adipiscing id quis mauris. Duis arcu nunc, mollis a quam vel, aliquam dignissim neque. Maecenas magna dui, dignissim quis felis sed, tincidunt molestie magna. Proin semper felis in dolor commodo, quis facilisis lorem facilisis.
	Vestibulum lorem quam, varius eget ipsum vel, lacinia laoreet lorem. Ut posuere elit non convallis blandit. Donec commodo fermentum neque, at sagittis libero faucibus nec. Nam dictum imperdiet dolor vel tincidunt.

</p>



<!-- Follow me on Twitter -->
<a class="twitter" target="_top" href="https://twitter.com/MrAhmadAwais"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
.img-fullscreen {
	max-width: 100vw;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.extra {
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

/* Demo's CSS */
/* apply a natural box layout model to all elements, but allowing components to change */
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
	font-size: 62.5%;
	height: 100%;
	min-height: 100%;
	max-width: 100%;
}

body {
	margin: 0;
	height: 100%;
	min-height: 100%;
	background-color: #0092f9;
	margin: 0;
	font: 300 2.5rem/1.5 "Lato", sans-serif;
	max-width: 100%;
}

img {
	margin: 30px 0;
	width: 100%;
	min-width: 100%;
	height: auto;
}

.wrap {
	background: #fff;
	margin: 0 auto;
	padding: 30px;
	width: 100%;
	max-width: 70rem;
}


// [IGNORE] DEMO CSS BELOW.
.twitter {
	position: fixed;
	display: block;
	right: 12px;
	bottom: 12px;
	svg {
		width: 32px;
		height: 32px;
		fill: #F9CE01;
	}
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

This Pen doesn't use any external JavaScript resources.