Эффект появления иконки при наведении на блок

Довольно простой пример на css но работает отлично, рассмотрим пример, когда наводим на картинку курсор и будет появляться иконка - означающая, что если нажмем на картинку - она увеличится, либо будет совершено какое то действие

Сначала структура в html

Ссылка будет вести на картинку для её увеличения, иконка внутри ссылки изначально скрыта, и будет показываться при наведении на саму картинку внутри ссылки, иконку используем из стандартного набора bootstrap

Далее стили для картинки, ссылки, иконки при наведении

	.primer-raboti{
		width: 300px;
		height: 300px;
		margin: 0 auto;
		position: relative;
	}
	.primer-raboti img {
		width: 100%;
	} 
	.primer-raboti .glyphicon {
		-webkit-transition: all 0.3s cubic-bezier(0.455,0.030,0.515,0.955);
		-moz-transition: all 0.3s cubic-bezier(0.455,0.030,0.515,0.955);
		-o-transition: all 0.3s cubic-bezier(0.455,0.030,0.515,0.955);
		transition: all 0.3s cubic-bezier(0.455,0.030,0.515,0.955);
		-webkit-transition-delay: 0.1s;
		transition-delay: 0.1s;
		background-color: #ED1C24;
		color: #ffffff;
		font-size: 20px;
		line-height: 50px;
		width: 50px;
		height: 50px;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		left: 125px;
		top: 150px;
		box-shadow: 0px 0px 5px rgba(0,0,0,0);
		opacity: 0;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		-khtml-opacity: 0;
		-webkit-opacity: 0;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	}
	.primer-raboti a:hover .glyphicon {
		box-shadow: 0px 0px 20px rgba(0,0,0,0.7);
		opacity: 1;
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		-khtml-opacity: 1;
		-webkit-opacity: 1;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
		margin-top: -25px;
	} 

Пример работы: