Войти Регистрация

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


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


Дискуссия по теме     4 Комментария 
Добавить комментарий
Алексей 06.09.2016 ? 10:05
Пригодилось, спасибо!
Cmac 28.03.2013 в 16:41
Всегда должен быть пример !!!!!!!!!!!!!!!!!!!!!!!
граммарнаци 18.04.2012 в 14:49
Не налаживается, а накладывается (последнее предложение).. А за материал спасибо.
Тарас 18.04.2012 в 17:54
Исправил... Спасибо за указание на ошибку. Был-бы у меня такой редактор, как вы... )))
Просмотров: 28214