Старинное оформление картинок на blogger blogspot

Привет Всем моим читателям. Вот появилось немного времени, которое я быстро конвертирую на время уделенное блогу. Сидя перед мониторм и делая очередное задание. Ко мне пришла «Эврика»  и я решила открыть серию постов: Оформление картинок на blogspot. Где я хочу собрать всевозможные скрипты по оформлению картинок как русских вебмастеров работающих с HTML, CSS так и зарубежных.

Я уже писала один пост об интересном решении  для картинок. Который может украсить ваш блог. Сегодня я решила продолжить данную тему.  Я нашла очень интересное оформление, возможно кому-то оно будет по душе.

Вставьте код перед </b:skin>

.vintage img {padding:0;float:left;}.vintage {border:10px solid #000;position: relative;float: left; /* Change to right if you want the images to be aligned to the right */margin-right: 20px;margin-bottom: 20px;}.vintage:before {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(255,102,0, 0.6); /* sepia */background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLG1k-6THLmp3UlBMAcdK046JIjViYxuGEiKnxQPIaD19ykuGZINd41cdcjN7dGYCRTmT-B9F_MJuQxHaG3mnph_zhApGUDMwgaLfFJjgEz912kpxYC2jLr8W76WjpTQR7diLZlwO8Mr8/s0/grunge.png);background-size: cover;box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}.vintage:hover:before {background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

Что бы заработал данный эффект на ваших картинках нужно поместить код в картинки в этот «контейнер»

 <div class="vintage"><img border="0" src="URL of the image" /></div><div style="clear: both;"/>

На картинке я попыталась показать как это примерно будет выглядеть

На этом пожалуй все. Па-па

Пожалуйста не забывайте нажать