Наложить картинку на картинку с помощью CSS

Пользовательский интерфейс должен быть понятным и практичным. При использовании фотографий или картинок в контенте сайта, приходиться их уменьшать, чтобы они красиво выглядели в теле страницы. Но уменьшив изображение, нужно также дать понять пользователю, что оно может увеличиваться. Для этого используется наложение одной картинки на другую картинку. Сегодня мы реализуем наложение иконки увеличения на картинку с помощью CSS.

Наложение одной картинки на другую, можно также реализовать с помощью jQuery. Но я не понимаю, зачем это делать, если можно все сделать с помощью нескольких строк CSS кода.

CSS наложение картинки на картинку

Для начала посмотрим, как выглядит наш HTML код, чтобы иметь лучшее понимание CSS кода.

<div id="gallery1">

     <h2>CSS solution</h2>

     <a href="3029990904_d10cc4fd9d_o.jpg">

         <span></span>

         <img src="3029990904_6fc619349d_m.jpg" alt="" />

     </a>

     <a href="3036302292_d37001ed77_o.jpg">

         <span></span>

         <img src="3036302292_61f44a917c_m.jpg" alt="" />

     </a>

 </div>

Как видите, вся фишка в <span> блоке, он будет появляться при наведении на ссылку, которая и есть нашим уменьшенным изображением. Этот блок в своем фоне имеет иконку увеличения, которая будет показываться на изображении. Ширина и высота блока, должны быть идентичными к размерам иконки. Вы увидите, что позиционирование иконки на изображении может быть изменено с помощью атрибутов top, bottom, right, left. Давайте рассмотрим CSS код:

#gallery1 {width:100%; overflow:hidden;} 

 #gallery1 a {position:relative; float:left; margin:5px;} 

 #gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;} 

 #gallery1 img { border: solid 1px #999; padding:5px;}

После написания этих кодов, иконка будет наложена на картинку. Но давайте добавим еще одну строку CSS кода, для создания интерактивности.

#gallery1 a:hover span { display:block;}

Теперь, при наведении – иконка накладывается на изображение, и это на чистом CSS коде. Точно так, как мы и желали!

Надеюсь, вам понравился пример наложения одной картинки на другую картинку. Если у вас есть вопросы или пожелания, оставьте их в комментариях. 

Дальше: CSS меню: выпадающее горизонтальное меню на css