Поворот картинки с затемнением на 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


12 комментариев:

  1. Привет, Вика. Спасибо за очередную фишку. Поиграла с картинкой. Для разнообразия можно использовать.

    ОтветитьУдалить
    Ответы
    1. Люба, понимаешь, когда писала и вспомнила про тебя. Почему-то подумала, что если ты прочитаешь пост обязательно попробуешь. Вот уже начинаю понимать своих постоянных читателей. Спасибо.

      Удалить
  2. Интересненько!!! Спасибо Вика!!! ╰⊰⊹✿

    ОтветитьУдалить
  3. Понравился новый дизайн вашего блога, мне кажется стало уютней ツ

    ОтветитьУдалить
    Ответы
    1. Татьяна, спасибо за отзыв.

      Удалить
  4. Интересный эффект. И хорошая новость про спецсимволы :)

    ОтветитьУдалить
    Ответы
    1. Наталья, спасибо за визит. А вот про спецсимволы пока, как я поняла не у всех ещё эта опция появилась.

      Удалить
  5. Да, и я в числе тех "счастливчиков", у которых пока что спецсимволов в редакторе не видать..( Все меняется в последнее время на блогах. Мне кажется, скоро нас переведут на G+ полностью.

    ОтветитьУдалить
    Ответы
    1. Мне тоже так кажется, но не очень хочется.

      Удалить
  6. Интересный пост. А Ваш блог, на мой взгляд, один из лучших относительного изучения тонкостей по настройке и ведению блогов.

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
  7. Спасибо Семён за отзыв.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo