Поворот картинки с затемнением на CSS

Здравствуйте, друзья, читатели и гости блога 👏. Давно ничего не делали с картинками. Сегодня предлагаю вашему вниманию эффект поворота картинки и, для пущей важности, добавим к нему затемнение (полупрозрачность), используя свойство opacity. В этой статье рассмотрен был вариант, как сделать прозрачность у счётчиков и баннеров.

Посмотрите, пожалуйста здесь, что предлагаю вам сегодня сделать.

Для реализации копируйте, предложенный ниже код. Конечно же, заранее приготовьте нужное изображение.

Код. 👀

<style>.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}</style>

<img alt="название" border="0" class="opacity" src=" адрес вашего изображения" />

Вставьте адрес вашей картинки и альтернативный текст. При написании сообщения перейдите в режим HTML и установите его в нужном месте.

P.S. Не знаю. обратили ли вы внимание, что в посте я использовала некоторые специальные символы. Вчера такая функция появилась в редакторе сообщений Блоггер около иконки вставить видео 😊.

Всё. Не буду занимать больше ваше драгоценное время. До новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email