Эффект появления иконки при наведении на блок
Довольно простой пример на 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; }
Пример работы:
