Move Image in Fotogallery

index.html

  <ul>
    <li><a href="http://www.stanwilliams.org/sources-of-media-which-are-in-the-public-domain/" target="_blank"><span><strong> Sources for Public Domain Works
</strong></span><img src="http://www.stanwilliams.org/wp-content/uploads/2016/12/Public_Domain_4web35kb_Bg.jpg"></a></li><!-- This needs Square or almost square images --->
		<li><a href="http://www.stanwilliams.org/dog-years-calculator/" target="_blank"><span><strong> &nbsp; Dog Age in Human Years  Calculator</strong></span><img src="http://www.stanwilliams.org/wp-content/uploads/2016/08/dog-years-wm-73kb.jpg"></a></li>
		<li><a href="http://www.stanwilliams.org" target="_blank"><span><strong> &nbsp; StanWilliams.org</strong></span><img src="http://www.stanwilliams.org/wp-content/uploads/2016/09/Thumbs_Up_US_MIne220.png"></a></li>
	</ul>

move-image-in-fotogallery.markdown

Move Image in Fotogallery

A Pen by Stan Williams on CodePen.

License.

style.css

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400");

* { 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
	  	
body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight:100;
	margin: 40px 0 0 0;
  background: #111;
}

ul {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	max-width: 600px;
}

li {
	float: left;
	margin:0 1.5777%;
	width: 37%;
	position: relative;
	overflow: hidden;
}

li img {
	max-width: 100%;
	display: block; 
	vertical-align: bottom;
}

li a img {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
  	transition: all 0.2s;
}

li a {
	display: block;
	text-decoration: none;
	color: rgba(255,255,255,0.8);
}

li a span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
  transition: all 0.2s;
	display: block;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);

}

li:nth-child(1) a span {
	background: rgba(0,0,0,0.9);
}

li:nth-child(2) a span {
	background: rgba(0,0,0,0.9);
}

li:nth-child(3) a span {
	background: rgba(0,0,0,0.9);
}

li a:hover span {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
}

li a span strong {
	opacity: 0;
	display: block;
	padding: 20px 20px 0 20px;
	font-weight: normal;
	transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
}

li a:hover span strong {
	opacity: 1;
}

li a:hover img {
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
}

@media only screen and (max-width: 767px) {
	body {
		font-size: 14px;
		line-height: 1.3;  
	}
	
	ul {
		margin: 0 auto;
	}
	
	li {
		float: none;
		margin:20px 10%;
		width: 80%;
	}
}

Preview here: https://codepen.io/Stanssongs/full/aVpGqX/