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

Поздрави на всички, които четат моя 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%;

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

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

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