Гвоздик для картины на CSS

Question

img{
        width: 100px;
        --s: 5px;
        padding: var(--s);
        border: calc(2*var(--s)) solid #0000;
        outline: 1px solid #e3e8ed;
        outline-offset: calc(-1*var(--s));
        background: conic-gradient(from 90deg at 1px 1px,#0000 25%,#e3e8ed 0);
}

<div>
    <img src="https://i.imgur.com/qvPvBz1.png" />
</div>

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

Answer 1

... при наведении мышью она колыхалась с затуханием

Так как ничего не сказано про поведение при уводе курсора, то добавляем обёртке псевдоэлементы и анимацию при наведении (размеры картинки перенёс в атрибут только для примера):

body { display: flex; justify-content: space-around; }

.picture {
  position: relative;
  width: 100%;
  max-width: min-content;
  padding-top: 15px;
  transform-origin: 50% 0;
  filter: drop-shadow(0 3px 1px #0004);
}
.picture:hover {
  animation: wiggle 3s ease-in-out forwards;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg);   }
  28%, 30% { transform: rotate(-16deg); }
  68%, 70% { transform: rotate(8deg);   }
}

.picture::before {
  content: '';
  position: absolute;
  top: 0; z-index: -1;
  height: 20px; width: 100%;
  background-image: linear-gradient( to right bottom, #00f0 calc(50% - 1px), #fa0 50%, #00f0 calc(50% + 1px)), linear-gradient( to left bottom, #00f0 calc(50% - 1px), #fa0 50%, #00f0 calc(50% + 1px));
  background-size: 100% 40px;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
.picture::after {
  content: '';
  position: absolute;
  top: -5px;
  height: 20px; width: 100%;
  background-image: radial-gradient(7px 5px at 50% 2px, #bbb 2px, #00f0 3px), linear-gradient( to right, #00f0 calc(50% - 2px), #888 calc(50% - 1px) calc(50% - 1px), #00f0 calc(50% + 2px));
  background-size: 100% 100%, 5px 7px;
  background-position: 50% 0%;
  background-repeat: no-repeat;
}

img {
  --s: 5px;
  display: block;
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  border-radius: 5px;
  outline: 1px solid #e3e8ed;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #e3e8ed 0), #fff;
  box-shadow: 0 0 0 2px #090;
  object-fit: contain;
}

<div class="picture"><img src="https://i.imgur.com/qvPvBz1.png" style="width: 50px; height: 100px"></div>
<div class="picture"><img src="https://i.imgur.com/qvPvBz1.png" style="width: 100px"></div>
<div class="picture"><img src="https://i.imgur.com/qvPvBz1.png" style="width: 300px; height: 100px"></div>

Чтобы не было скачка при уводе курсора, одного лишь CSS будет мало.

БЛОГ НА HUSL

Гвоздик для картины на CSS

Ответы (1 шт):