! Сегодня

Главная » Web и Технологии » Красивый hover эффект для изображения

Красивый hover эффект для изображения

Если хочешь узнать человека, не слушай, что о нём говорят другие, послушай, что он говорит о других.

3-февраля-2023, 22:57   202   0

Красивый hover эффект для изображения

Иногда нужно оформить какое либо изображение на веб сайте. Просто картинкой ни кого уже не заманить. Для этого можно использовать простой? красочный  hover эффект при наведении мышкой на изображение (фото). Данный ховер эффект реализован при помощи CSS. Сам же эффект выглядит приблизительно так, имеем круглую верстку в которой расположено изображение, поверх которого наложено несколько полукругов разного оттенка и прозрачности. При наведении мышкой на изображение - эти полукруги начинают расходится от центра к краю круга тем самым оголяя изображение. Далее приведу исходники красивого ховер эффекта.

HTML

<div class="container">
 <div class="dia"></div>
 <div class="dia giro"></div>
 <img src="http://placekitten.com/400" />
</div>

CSS

body {
 background: #222;
 zoom: 1.5;
}
.container {
 background: #fff;
 margin: 100px auto;
 width: 200px;
 height: 200px;
 overflow: hidden;
 border-radius: 50%;
 position: relative;
}
img {
 z-index: -1;
 height: 200px;
 width: 200px;
 border-radius: 50%;
}
.dia {
 position: absolute;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 box-shadow: inset 0px 100px 0px rgba(255, 0, 0, 0.5), inset 0px -100px 0px rgba(255, 255, 0, 0.5), inset 100px 0px 0px rgba(255, 0, 40, 0.5), inset -100px 0px 0px rgba(255, 69, 0, 0.5);
 transition: box-shadow 0.5s;
}
.giro {
 transform: rotate(45deg);
 opacity: 0.5;
 transition: box-shadow 1s;
}
.container:hover .dia {
 box-shadow: inset 0px 15px 0px #ff0000, inset 0px -15px 0px #ffff00, inset 15px 0px 0px #ff0028, inset -15px 0px 0px #ff4500;
}

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Человек быстро решит загадку пять умножить на пять и минус 25 ?

Редакторы выбирают

Web и Технологии