TransWikia.com

Как с помощью CSS или SVG сделать свечение вокруг картинки при наведении

Stack Overflow на русском Asked on November 27, 2021

Вот макет

введите сюда описание изображения

Вот HTML

<div class="gumb_thumb blue">
  <div class="img_2_box">
    <img src="image.png" alt="" />
  </div>
</div>

Вот CSS

.gumb_thumb .img_2_box {
    height: 190px;
    margin-top: 32px;
    position: relative;
}

.gumb_thumb .img_2_box img {
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

При на ведении на жвачку должно появляться голубое свечение. Как это сделать?

csshtmlsvgвёрстка

4 Answers

Две картинки, одной из которых добавлен filter: blur

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.img-blur {
  display: inline-block;
  position: relative;
}

.img-blur img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  border: 0;
}

.img-blur img:nth-child(1) {
  position: absolute;
  z-index: 1;
  filter: blur(40px);
  opacity: 0;
}

.img-blur img:nth-child(2) {
  position: relative;
  z-index: 2;
}

.img-blur:hover img:nth-child(1) {
  opacity: 1;
}
<div class="img-blur">
  <img src="https://i.imgur.com/f7H6xQR.png">
  <img src="https://i.imgur.com/f7H6xQR.png">
</div>

Вариант с псевдоэлементами, box-shadow и трансформацией псевдоэлементов под форму изображения.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.img-blur {
  display: inline-block;
  position: relative;
}

.img-blur img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  border: 0;
  position: relative;
  z-index: 2;
}

.img-blur::before,
.img-blur::after {
  content: '';
  display: block;
  width: 90%;
  height: 75%;
  background: transparent;
  box-shadow: 0 0 50px 0 #0079c4;
  position: absolute;
  top: 0;
  z-index: 1;
  opacity: 0;
}

.img-blur::before {
  transform: skewX(11deg) skewY(-7deg) translate(2.5%, 18%);
}

.img-blur::after {
  transform: skewX(15deg) skewY(-6deg) translate(4%, 12%);
}

.img-blur:hover::before,
.img-blur:hover::after {
  opacity: 1;
}
<div class="img-blur">
  <img src="https://i.imgur.com/f7H6xQR.png">
</div>

Использовать filter: drop-shadow

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.img-blur {
  display: inline-block;
  position: relative;
}

.img-blur img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  border: 0;
}

.img-blur:hover img {
  filter: drop-shadow(0 0 40px #0079c4);
}
<div class="img-blur">
  <img src="https://i.imgur.com/f7H6xQR.png">
</div>

Использовать заранее размытую картинку

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.img-blur {
  display: inline-block;
  position: relative;
}

.img-blur img {
  display: block;
  object-fit: contain;
  border: 0;
}

.img-blur img:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.img-blur img:nth-child(2) {
  position: relative;
  z-index: 2;
}

.img-blur:hover img:nth-child(1) {
  opacity: .5;
}
<div class="img-blur">
  <img src="https://i.imgur.com/Q3kCaaP.png">
  <img src="https://i.imgur.com/f7H6xQR.png">
</div>

Answered by De.Minov on November 27, 2021

Основная проблема в создании цветной тени изображения, как мне кажется, состоит в том, что если применять напрямую SVG, CSS фильтры, box-shadow, то получится тень не вокруг фигуры, а вокруг прямоугольника, ограничивающего изображение.

Поэтому решение:

  1. Нарисовать контур фигуры в векторном редакторе
  2. Использовать этот контур в качестве маски для вырезания фигуры из прямоугольного изображения.
  3. Повторно использовать контур, к которому будет применен SVG фильтр для создания цветной тени.

Смотрите комментарии в коде, надеюсь они помогут понять основные моменты реализации решения

Вот начинка, что находится под капотом: контур изображения с примененным фильтром для тени

#shadowCopy {
 fill:black;
  
 } 
  .shadowCopy:hover  {
  filter:url(#shadow);
 }
 .img {
 pointer-events:none;
 
 }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="900" height="600" viewBox="0 0 900 600" style="border:1px solid gray;" >   
    <defs>
         <!-- Маска вырезает из прямоугольной картинки  контур изображения -->
     <mask id="msk1"> 
            <path d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z" style="fill:white;stroke:#000"/>
      </mask> 
         <!-- Фильтр обеспечивает цветную тень    -->
     <filter id="shadow" x="-20%" y="-20%" width="200%" height="200%" >
      <feDropShadow dx="0" dy="10" stdDeviation="35" flood-color="#52BCFD" />
    </filter>
     </defs> 
     <!-- Фон -->
     <rect width="100%" height="100%" fill="#E8EAE9" />  
      
      <!-- Копия контура картинки, к которой применен цветной фильтр тени -->
    <path class="shadowCopy" stroke="dodgerblue" stroke-width="3"   d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z"  />
        
</svg>

Сверху добавляем изображение

  <!-- Растровое изображение, к которому применена маска  -->
       <image class="img" xlink:href="6013176005.jpg" mask="url(#msk1)" width="100%" height="100%" />

Ниже полный код:

<style>
 #shadowCopy {
 fill:black;
  
 } 
  .shadowCopy:hover  {
  filter:url(#shadow);
 }
 .img {
 pointer-events:none;
 
 }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="900" height="600" viewBox="0 0 900 600" style="border:1px solid gray;" >   
    <defs>
         <!-- Маска вырезает из прямоугольной картинки  контур изображения -->
     <mask id="msk1"> 
            <path d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z" style="fill:white;stroke:#000"/>
      </mask> 
         <!-- Фильтр обеспечивает цветную тень    -->
     <filter id="shadow" x="-20%" y="-20%" width="200%" height="200%" >
      <feDropShadow dx="0" dy="10" stdDeviation="35" flood-color="#52BCFD" />
    </filter>
     </defs> 
     <!-- Фон -->
     <rect width="100%" height="100%" fill="#E8EAE9" />  
      
      <!-- Копия контура картинки, к которой применен цветной фильтр тени -->
    <path class="shadowCopy"   d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z"  />
          <!-- Растровое изображение, к которому применена маска  -->
       <image class="img" xlink:href="https://i.stack.imgur.com/BmOyx.jpg" mask="url(#msk1)" width="100%" height="100%" />  
</svg>

Answered by Alexandr_TT on November 27, 2021

   <div class="img_2_box">
        <img src="img.png" alt="" />
        <span class="light"></span>
    </div>

.img_2_box {
    height: 190px;
    position: relative;
}

.img_2_box .light {
    width: 65%;
    height: 65px;
    opacity: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 52%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    box-shadow: 0 0 83px 10px #24aafd;
}

Answered by Denis on November 27, 2021

помести картинку в блок, задай блоку градиент и готово: html код:

<div id = "container">
<img src = "example.jpg">
</div>

css:

#container:href {
padding: 40px;
background: radial-gradient(#FFA9A1, white);
}

Answered by user399143 on November 27, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP