Oaks

Именно для Вашего примера вот так:

.member:nth-of-type(3n+1) {
    clear: both;
}

Html

<div class="member">
  <img src="http://placehold.it/150x188">
  <h4 class="title">Заголовок</h4>
  <div class="description">
    <p>Описание</p>
  </div>
  <div class="meta">
    <span class="phone">телефон</span>
    <span class="fax">факс</span>
    <span class="linck"><a href="mailto:email">email</a>	</span>
  </div>
</div>

Адаптация:

@media only screen and (min-width: 80em) {
  .member:nth-of-type(4n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}
@media only screen and (min-width: 64em) {
  .member:nth-of-type(4n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}
@media only screen and (min-width: 40em) {
  .member:nth-of-type(3n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}
@media only screen {
  .member:nth-of-type(1n+1) {
    clear: both;
  }
  .member:nth-of-type(1n) {
    clear: none;
  }
}

Для первого раза очень хорошо)

C opacity и transition: all .2s;



вот что получилось за 5 мин. HTML and CSS
код не обдуман!

<div class="wrap">
			<div class="img-wrap">
				<img src="https://rvm.io/images/rvm-logo-all-happy.png"/>
				<div class="pop">
					<div class="pop-img">
						<img src="https://rvm.io/images/rvm-logo-all-happy.png"/>
						<h3>RVM</h3>
					</div>
					<div class="desc">
						<p>RVM is a command-line tool which allows you to easily install</p>	
					</div>
				</div>
			</div>
			<h2>Ruby on Rails</h2>
			
		</div>

.wrap {
		text-align: center;
		width: 150px;
		height: 150px;
		float: left;
		margin-right: 20px;
	}
	img {
		max-width: 100%;
	}
	.img-wrap {
		position: relative;
		width: 150px;
		height: 150px;
		border-radius: 100%;
		background-color: #efefef;
		text-align: center;
	}
	.wrap img {
		width: 100%;
		height: auto;
	}
	.pop {
		position: absolute;
		top: -210px;
		left: 0;
		width: 300px;
		height: 150px;
		display: none;
		background-color: #efefef;
		padding: 20px 10px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}
	.pop:after {
		content: ''; 
    		position: absolute;
    		left: 65px; 
		bottom: -20px;
	 	border: 10px solid transparent; 
		border-top: 10px solid #efefef;
	}
	.wrap:hover .pop {
		display: block;
		
	}
	.pop-img {
		width: 100px;
		height:100px;
		border-radius: 100%;
		background-color: #fff;
		float: left;
	}
	.desc {
		padding: 0 10px;
		float: left;
		width: 180px;
	}

Dreamweaver

Или background-size: contain;

Нет

А в вашем шаблоне (wp-content/themes) есть переопределенные шаблоны woo?