마우스가 그림 위에있을 때의 효과

a.apparat {
color: #4a4a4a;

float:left;
margin:5px;
}
a.apparat:hover{
	color: #1c97a9;
	text-decoration: none;
}
.img-box{
  position:relative;
}
.img-box:before{
  content:"";
  position:absolute;
  bottom:-4px;
  left:50%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid #4a4a4a;
  margin-left: -5px;

}
.img-box:after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:50%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid #fff;
  margin-left: -5px;

}
a:hover .img-box:before{
border-top: 10px solid #1c97a9;
}
img.catalog_apparat {
	border: 2px solid #4a4a4a;
	width: 250px;
	height: 250px
}
a:hover img.catalog_apparat{
	border: 2px solid #1c97a9;
}
.apparat_description {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: bolder;
	font-size: 14px;
	margin:6px 0 10px;
  text-align: center;
}
.apparat_description:hover .catalog_apparat {
	border: 2px solid red;
}

<a href="#" class="apparat">
<div class="img-box">
<img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
</div>
<div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
<div class="img-box">
<img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
</div>
<div class="apparat_description">Gynecology</div>
</a>