0

Как реализовать такой эффект при наведении? Картинка вставлена с помощью тега imgвведите сюда описание изображениявведите сюда описание изображения

3 ответа 3

4

Для значка ссылки использовал иконку Font-Awesome, но в принципе её можно также задать картинкой или использовать собственный иконочный шрифт.

*,
*:before,
*:after{
  box-sizing:border-box;
}
.img-link{
  display:block;
  width:200px;
  height:200px;  
  border:7px solid #fff;
  box-shadow:0 0 1px 1px gray;
  border-radius:50%;
  background:linear-gradient(145deg,#4a35c5,#ba13c5);
  position:relative;
  color:transparent;
  transition:all .5s ease;
}
.img-link:before{
  content:'\f0c1';
  font-family:fontAwesome;
  font-size:40px;
  line-height:1;
  position:absolute;
  top:calc(50% - .5em);
  left:calc(50% - .5em);
  z-index:2;
}
.img-link img{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  object-position:center;
  transition:inherit;
}
.img-link:hover{
  color:#fff;
}
.img-link:hover img{
  opacity:.4;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" class="img-link">
  <img src="https://s1.gifyu.com/images/rbt-spa-massage-hand-foot-reflex-410-a.jpg" alt=""/>
</a>

1
  • Идеально, спасибо, галку поставил)) 9 мая 2018 в 16:05
3

Вот таким образом:

.wrapper {
  position: relative;
}

.hoverEffect {
  position: absolute;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  transition: opacity  1s ease-in-out;
  top: 0;
  left: 0;
  margin: 6px;
  background-color: 	rgba(128,0,128, 0.6);

}

.wrapper img {
  border: 1px solid #a0522d;
  padding: 5px;
}
.wrapper , .wrapper img , .hoverEffect {
  border-radius: 100%;
  height: 175px;
  width: 175px;
}

.wrapper:hover .hoverEffect {
  opacity: 1;
}
<div class='wrapper'>
    <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="image">
    <div class='hoverEffect'>
      Icon<!--  тут вставить icon -->
    </div>
</div>

1
  • Большое спасибо) 9 мая 2018 в 16:05
1
  1. Можно наложить маску и скрыть ее opacity: 0; а при наведении показывать с определенной степенью прозрачности.

  2. Лучше отрисовав 2 картинки в 1 файле загружать 1 с backgroud-postiion с начальное верхней левой точки и задать размер чтобы 2-ю ее часть не было видно, а при наведении делать смещение картинки с тем же backgroud-postiion в результате пользователь и не поймет что это одна большая картинка просто при наведении ее другая часть показывается.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.