За блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Изображения с красиви ефекти

красиви ефекти
Поздрави на всички, които четат моя Blogzablogove.com. Днес ще се върнем към нашите изображения, които използваме в блога си. Предлагам ви приятни ефекти, когато изображенията са под курсор. По-точно предлагам да разгледате три варианта на този ефект. Всичко работи изцяло на CSS3, поради което инсталирането им ще бъде лесно.



    Първо трябва да създадем прост HTML код, а после и CSS стиловете, които ще направят анимацията.
    HTML кодът за всички варианти е еднакъв.

    <div class="imgholder">
      <div class="outer1 circle"></div>
      <div class="outer2 circle"></div>
      <figure>
      <img src="http://scromy.com/wp-content/uploads/2017/02/purple-lily-flower-wallpaper-hd.jpg
    " />
      <figcaption class="caption">Цветя</figcaption>
      </figure>
      </div>

    За да видите всеки от ефектите, копирайте кода, показан по-горе. Идете на тази страница и го поставете в редактора. А след него поставете и първия стил. После кликнете най-долу, за да го видите. И така с всеки от трите стила. Този от тях, който ви харесва, него изберете за внедряване.

    Вариант първи

    Кодът е:

    <style>
    .imgholder{
      position:relative;
      width:120px;
      height:120px;
      border-radius:100px;
      float:left;
      margin:40px 30px;
    }
    /* thumbnails style */
    .imgholder img{
      position:absolute;
      left:0;
      top:0;
      width:120px;
      height:120px;
      z-index:5;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      opacity:0.3;
      filter: alpha(opacity = 30);
      box-shadow:0 0 5px #000;
      -moz-box-shadow:0 0 5px #000;
      -webkit-box-shadow:0 0 5px #000;

      transform: scale(0.5,0.5);
      -ms-transform: scale(0.5,0.5);
      -moz-transform: scale(0.5,0.5);
      -webkit-transform: scale(0.5,0.5);

      transition:
      opacity 1s,
      transform 1s ease-in-out 0.3s;
      -moz-transition:
      opacity 1s,
      -moz-transform 1s ease-in-out 0.3s;
      -webkit-transition:
      opacity 1s,
      -webkit-transform 1s ease-in-out 0.3s;
    }
    .imgholder:hover img{
      opacity:1;
      filter: alpha(opacity = 100);
      transform: scale(1,1);
      -ms-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -webkit-transform: scale(1,1);
    }

    .imgholder figcaption{
      position:absolute;
      left:33px;
      top:40%;
      width:130px;
      color:#004E87;
      font-weight:bold;
      text-shadow:-1px -1px 0 #fff;
      z-index:4;

      transition:
      top 0.5s ease-out;
      -moz-transition:
      top 0.5s ease-out;
      -webkit-transition:
      top 0.5s ease-out;
    }
    .imgholder:hover figcaption{
      top:120%;
    }
    /* decorations style */
    .imgholder .circle{
      position:absolute;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }
    .imgholder .outer1{
      top:-8px;
      left:-8px;
      width:120px;
      height:120px;
      z-index:2;

      border:8px solid;
      border-color:#DEEBFC;
      box-shadow:0 0 3px #AFD3FF;
      -moz-ox-shadow:0 0 3px #AFD3FF;
      -webkit-box-shadow:0 0 3px #AFD3FF;

      background: #ffffff;
      background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
      background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );

      transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg);

      transition:
      transform 1.8s ease-in-out,
      box-shadow 1s ease-out,
      border-color 1.5s;
      -moz-transition:
      -moz-transform 1.8s ease-in-out,
      -moz-box-shadow 1s ease-out,
      border-color 1.5s;
      -webkit-transition:
      -webkit-transform 1.8s ease-in-out,
      -webkit-box-shadow 1s ease-out,
      border-color 1.5s;
    }
    .imgholder:hover .outer1{
      border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
      box-shadow:0 0 10px #0285E2;
      -moz-box-shadow:0 0 10px #0285E2;
      -webkit-box-shadow:0 0 10px #0285E2;
      transform:rotate(-10deg);
      -ms-transform:rotate(-10deg);
      -moz-transform:rotate(-10deg);
      -webkit-transform:rotate(-10deg);
    }
    .imgholder .outer2{
      top:-18px;
      left:-18px;
      width:136px;
      height:136px;
      z-index:1;

      border:10px solid;
      border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
      box-shadow:0 0 20px #8EB9FF;
      -moz-box-shadow:0 0 20px #8EB9FF;
      -webkit-box-shadow:0 0 20px #8EB9FF;
      opacity:0;
      filter: alpha(opacity = 0);

      transform: scale(1.3,1.3) rotate(180deg);
      -ms-transform: scale(1.3,1.3) rotate(180deg);
      -moz-transform: scale(1.3,1.3) rotate(180deg);
      -webkit-transform: scale(1.3,1.3) rotate(180deg);

      transition:
      opacity 0.5s,
      transform 0.7s ease-out;
      -moz-transition:
      opacity 0.5s,
      -moz-transform 0.7s ease-out;
      -webkit-transition:
      opacity 0.5s,
      -webkit-transform 0.7s ease-out;
    }
    .imgholder:hover .outer2{
      opacity:0.9;
      filter: alpha(opacity = 90);
      transform: scale(1,1) rotate(-10deg);
      -ms-transform: scale(1,1) rotate(-10deg);
      -moz-transform: scale(1,1) rotate(-10deg);
      -webkit-transform: scale(1,1) rotate(-10deg);
    }
    </style>


    Вариант втори

    Код:

    <style>
    .imgholder{
      position:relative;
      width:120px;
      height:120px;
      float:left;
      margin:40px 30px;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }

    /* thumbnails style */
    .imgholder figure{
      position:absolute;
      left:0;
      top:0;
      width:120px;
      height:120px;
      margin:0;
      overflow:hidden;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }
    .imgholder img{
      position:absolute;
      left:0;
      top:0px;
      width:120px;
      height:120px;
      z-index:5;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      opacity:0;
      filter: alpha(opacity = 0);

      transform: scale(1.5,1.5);
      -ms-transform: scale(1.5,1.5);
      -moz-transform: scale(1.5,1.5);
      -webkit-transform: scale(1.5,1.5);

      transition:
      opacity 1s ease-in,
      transform 1.5s;
      -moz-transition:
      opacity 1s ease-in,
      -moz-transform 1.5s;
      -webkit-transition:
      opacity 1s ease-in,
      -webkit-transform 1.5s;
    }
    .imgholder:hover img{
      opacity:1;
      filter: alpha(opacity = 100);
      transform: scale(1,1);
      -ms-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -webkit-transform: scale(1,1);
    }
    .imgholder figcaption{
      position:absolute;
      left:40px;
      top:40%;
      width:130px;
      opacity:1;
      filter: alpha(opacity = 100);
      color:#004E87;
      font-weight:bold;
      text-shadow:-1px -1px 0 #fff;
      z-index:4;

      transform: scale(1,1);
      -ms-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -webkit-transform: scale(1,1);

      transition:
      opacity 1s,
      transform 1s ease;
      -moz-transition:
      opacity 1s,
      -moz-transform 1s ease;
      -webkit-transition:
      opacity 1s,
      -webkit-transform 1s ease;
    }
    .imgholder:hover figcaption{
      opacity:0;
      filter: alpha(opacity = 0);
      transform: scale(1.5,1.5);
      -ms-transform: scale(1.5,1.5);
      -moz-transform: scale(1.5,1.5);
      -webkit-transform: scale(1.5,1.5);
    }
    /* decoration style */
    .imgholder .circle{
      position:absolute;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }
    .imgholder .outer1{
      top:-8px;
      left:-8px;
      width:120px;
      height:120px;
      z-index:2;

      border:8px solid;
      border-color:#DEEBFC;
      box-shadow:0 0 3px #AFD3FF;
      -moz-box-shadow:0 0 3px #AFD3FF;
      -webkit-box-shadow:0 0 3px #AFD3FF;

      background: #ffffff;
      background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
      background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );

      transition:
      box-shadow 1s ease-out,
      border-color 1.5s;
      -moz-transition:
      -moz-box-shadow 1s ease-out,
      border-color 1.5s;
      -webkit-transition:
      -webkit-box-shadow 1s ease-out,
      border-color 1.5s;
    }
    .imgholder:hover .outer1{
      border-color:#0088EA;
      box-shadow:0 0 10px #0285E2;
      -moz-box-shadow:0 0 10px #0285E2;
      -webkit-box-shadow:0 0 10px #0285E2;
    }

    .imgholder .outer2{
      top:-18px;
      left:-18px;
      width:136px;
      height:136px;
      z-index:1;

      border:10px solid;
      border-color: #9BC8FF;
      box-shadow:0 0 20px #8EB9FF;
      -moz-box-shadow:0 0 20px #8EB9FF;
      -webkit-box-shadow:0 0 20px #8EB9FF;
      opacity:0;
      filter: alpha(opacity = 0);

      transform: scale(1.3,1.3);
      -ms-transform: scale(1.3,1.3);
      -moz-transform: scale(1.3,1.3);
      -webkit-transform: scale(1.3,1.3);

      transition:
      opacity 1s ease 0.3s,
      transform 1s ease-out 0.3s;
      -moz-transition:
      opacity 1s ease 0.3s,
      -moz-transform 1s ease-out 0.3s;
      -webkit-transition:
      opacity 1s ease 0.3s,
      -webkit-transform 1s ease-out 0.3s;
    }
    .imgholder:hover .outer2{
      opacity:1;
      filter: alpha(opacity = 100);
      transform: scale(1,1);
      -ms-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -webkit-transform: scale(1,1);
    }</style>


    Вариант трети


    Неговият код е:

    <style>
    .imgholder{
      position:relative;
      width:120px;
      height:120px;
      border-radius:100px;
      float:left;
      margin:40px 30px;
    }

    .imgholder img{
      position:absolute;
      left:0;
      top:0;
      width:120px;
      height:120px;
      z-index:5;
      opacity:0.5;
      filter: alpha(opacity = 50);
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      box-shadow:0 0 5px #000;

      transition:
      opacity 0.7s ease-out 0.3s;
      -moz-transition:
      opacity 0.7s ease-out 0.3s;
      -webkit-transition:
      opacity 0.7s ease-out 0.3s;
    }
    .imgholder:hover img{
      opacity:1;
      filter: alpha(opacity = 100);
    }
    .imgholder figcaption{
      position:absolute;
      left:30;
      top:80%;
      width:120px;
      color:#004E87;
      text-shadow:-1px -1px 0 #fff;
      z-index:4;
    }

    .imgholder .circle{
      position:absolute;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }
    .imgholder .outer1{
      top:-8px;
      left:-8px;
      width:120px;
      height:120px;
      z-index:2;

      border:8px solid;
      border-color:#DEEBFC;
      box-shadow:0 0 3px #AFD3FF;
      -moz-box-shadow:0 0 3px #AFD3FF;
      -webkit-box-shadow:0 0 3px #AFD3FF;

      background: #ffffff;
      background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
      background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );

      transition:
      box-shadow 1s ease-out,
      border-color 1s;
      -moz-transition:
      -moz-box-shadow 1s ease-out,
      border-color 1s;
      -webkit-transition:
      -webkit-box-shadow 1s ease-out,
      border-color 1s;
    }
    .imgholder:hover .outer1{
      border-color:#0088EA;
      box-shadow:0 0 10px #0285E2;
    }
    .imgholder .outer2{
      top:-18px;
      left:-18px;
      width:136px;
      height:136px;
      z-index:1;

      border:10px solid;
      border-color: #9BC8FF;
      box-shadow:0 0 3px #8EB9FF;
      -moz-box-shadow:0 0 3px #8EB9FF;
      -webkit-box-shadow:0 0 3px #8EB9FF;
      opacity:0;
      filter: alpha(opacity = 0);

      transition:
      opacity 0.7s ease-out 0.3s,
      box-shadow 0.7s ease-out 0.3s;
      -moz-transition:
      opacity 0.7s ease-out 0.3s,
      -moz-box-shadow 0.7s ease-out 0.3s;
      -webkit-transition:
      opacity 0.7s ease-out 0.3s,
      -webkit-box-shadow 0.7s ease-out 0.3s;
    }

    .imgholder:hover .outer2{
      opacity:1;
      filter: alpha(opacity = 100);
      box-shadow:0 0 20px #8EB9FF;
    }</style>


    Всъщност всичко е много лесно. В CSS кодовете можете да експериментирате с размерите и цветовете. Ако използвате тези ефекти в публикациите си, работете както винаги в режим HTML и впишете кодовете им на желаното от вас място.

    Възможно е да направите корекция в тази част на кода, който е отговорен за заглавната част на изображението, а именно:
    .imgholder figcaption{
    position:absolute;
    left:30;

    top:80%;

    Благодаря за вниманието. Ще се видим отново. Желая ви ефектни изображения.

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    Няма коментари:

    Публикуване на коментар