0

Подскажите, пожалуйста, как сделать, чтобы при наведении на блок с изображением, он сдвигался и на него накладывался градиент?

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

6
  • По фотографии видно что там не мало работы была над этим эффектом.. Может загляните в исходник, там где есть этот эффект, и посмотреть как) Но не удивляйтесь если там код будет ну не знаю в 500 строк))
    – E1mir
    16 окт 2016 в 14:38
  • только psd макет есть (
    – Anastasiia
    16 окт 2016 в 14:40
  • @Anastasiia Вы имеете ввиду тень prntscr.com/cv01en ?
    – Alex
    16 окт 2016 в 14:45
  • и наложение градиента
    – Anastasiia
    16 окт 2016 в 14:52
  • @Anastasiia добавили ответ, однако помните, что прежде чем публиковать вопрос нужно попытаться решить проблему самостоятельно. По верстке и css сейчас документации и примеров очень много. А уже если не получается необходимо показать как именно самостоятельно Вы пытались решить проблему. В ином случае таким вопросам место на фрилансе, т.к. они вряд ли будут полезны сообществу.
    – Alex
    16 окт 2016 в 15:19

2 ответа 2

2

.box {
  background: #95E1D4;
  width: 150px;
  height: 150px;
}
.box_image {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.box_image img {
  width: 100%;
}
.box_t {
  display: none;
  position: absolute;
  z-index: 2;
  width: 150px;
  height: 150px;
  background: -moz-linear-gradient(top, rgba(155, 155, 155, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(155, 155, 155, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(155, 155, 155, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a69b9b9b', endColorstr='#00000000', GradientType=0);
  /* IE6-9 */
}
.box:hover .box_image {
  position: absolute;
  z-index: 1;
  left: -5px;
  top: -5px;
}
.box:hover .box_t {
  display: block;
}
<div class="box">
  <div class="box_image">
    <div class="box_t"></div>
    <img src="https://i.stack.imgur.com/dKLDr.jpg">
  </div>
</div>

5
  • Я без наезда, просто интересно. Вы наизусть помните все префиксы ко всем свойствам? Не понимаю смысла их писать, часто вижу, что их пишут. Или это просто копипаста?
    – Rolandius
    16 окт 2016 в 15:37
  • 1
    @Rolandius смотря какой префикс. В данном случае градиент сделан через онлайн генератор, а там по умолчанию ставятся префиксы для разных версий браузеров для кросбраузерности. Всегда есть доля пользователей со старыми браузерами и если Ваш проект нацелен на них Вам нужно прописывать префексы. Сейчас многие просто делают заглушку для старых браузеров с просьбой обновить браузер, но это как вариант.
    – Alex
    16 окт 2016 в 15:45
  • Это был намек об autoprefixer и прочих прелестях 21 века... Запомнить все префиксы невозможно, в коде, особенно в обучающих примерах, это выглядит дико, они отвлекают от смысла своей водой и самое главное - знать их не нужно. Почему нельзя просто упоминать об ограниченности старых браузеров и все?
    – Rolandius
    16 окт 2016 в 16:00
  • @Rolandius никогда не думал, что это выглядит дико и обычно добавляются комменты, поэтому даже лично для меня это не является водой. По поводу всего знать невозможно.. - главное понимать код, и уже возможности знать как можно больше. К тому же наверняка если писать об ограниченности в старых браузерах со временем найдутся пользователи, которые будут спрашивать в комментах о каких ограничениях идет речь и что нужно добавить в код.
    – Alex
    16 окт 2016 в 16:27
  • 1
    Я удовлетворил свое любопытство по поводу таких ответов, спасибо.
    – Rolandius
    16 окт 2016 в 17:08
1

Показываем блок при ховер

* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.hover-blind {
  width: 320px;
  height: 240px;
  position: relative;
  margin: 20px;
}
.blind {
  width: 320px;
  height: 240px;
  position: absolute;
  top: 0;
  left: 0;
}
.gradient {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, .6)linear-gradient(red, black);
  position: absolute;
  top: 0;
  left: 0;
  opacity: .7;
  z-index: 100;
  display: none;
  text-align: center;
}
.gradient p {
  font-size: 24px;
  color: 111;
  line-height: 220px;
  position: relative;
  text-transform: uppercase;
  font-weight: 900;
}
.gradient p:after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 40px;
  left: 40%;
  background: url(http://simpleicon.com/wp-content/uploads/multy-user.png);
  background-size: 100% 100%;
}
.hover-blind:hover .gradient {
  display: block;
}
<div class="hover-blind">
  <div class="blind">
    <img src="http://free4uwallpapers.eu/wp-content/uploads/Computers/hd-wallpaper-computers-mac.jpg" alt="рабочий стол">
  </div>
  <div class="gradient">
    <p>super team</p>
  </div>
</div>

С тенью

* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.hover-blind {
  width: 320px;
  height: 240px;
  position: relative;
  margin: 20px;
}
.blind {
  width: 320px;
  height: 240px;
  position: absolute;
  top: 0;
  left: 0;
}
.gradient {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, .6)linear-gradient(red, black);
  position: absolute;
  top: 0;
  left: 0;
  opacity: .7;
  z-index: 100;
  display: none;
  text-align: center;
}
.gradient p {
  font-size: 24px;
  color: 111;
  line-height: 220px;
  position: relative;
  text-transform: uppercase;
  font-weight: 900;
}
.gradient p:after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 40px;
  left: 40%;
  background: url(http://simpleicon.com/wp-content/uploads/multy-user.png);
  background-size: 100% 100%;
}
.hover-blind:hover .gradient {
  display: block;
}
.shadow {
  width: 320px;
  height: 230px;
  position: absolute;
  top: 14px;
  left: 6px;
  background: rgba(255, 0, 0, .6);
  z-index: -1;
  box-shadow: 0 0 6px #9e5a5a;
  display: none;
}
.hover-blind:hover .shadow {
  display: block;
}
<div class="hover-blind">
  <div class="blind">
    <img src="http://free4uwallpapers.eu/wp-content/uploads/Computers/hd-wallpaper-computers-mac.jpg" alt="рабочий стол">
  </div>
  <div class="gradient">
    <p>super team</p>
  </div>
  <div class="shadow"></div>
</div>
C требуемым эффектом

* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.hover-blind {
  width: 320px;
  height: 240px;
  position: relative;
  margin: 20px;
}
.blind {
  width: 320px;
  height: 240px;
  position: absolute;
  top: 0;
  left: 0;
}
.gradient {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, .6)linear-gradient(red, black);
  position: absolute;
  top: 0;
  left: 0;
  opacity: .7;
  z-index: 100;
  display: none;
  text-align: center;
}
.gradient p {
  font-size: 24px;
  color: 111;
  line-height: 220px;
  position: relative;
  text-transform: uppercase;
  font-weight: 900;
}
.gradient p:after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 40px;
  left: 40%;
  background: url(http://simpleicon.com/wp-content/uploads/multy-user.png);
  background-size: 100% 100%;
}
.hover-blind:hover .gradient {
  display: block;
}
.hover-blind:hover {
  left: -7px;
  top: -6px;
}
.shadow {
  width: 320px;
  height: 230px;
  position: absolute;
  top: 14px;
  left: 6px;
  background: rgba(255, 0, 0, .6);
  z-index: -1;
  box-shadow: 0 0 6px #9e5a5a;
  display: none;
}
.hover-blind:hover .shadow {
  display: block;
  top: 17px;
}
<div class="hover-blind">
  <div class="blind">
    <img src="http://free4uwallpapers.eu/wp-content/uploads/Computers/hd-wallpaper-computers-mac.jpg" alt="рабочий стол">
  </div>
  <div class="gradient">
    <p>super team</p>
  </div>
  <div class="shadow"></div>
</div>

2
  • @Alex добавил такой пример
    – user33274
    16 окт 2016 в 16:06
  • @Alex вот пример в песочнице : codepen.io/Geyan/pen/zKJogX?editors=1100
    – user33274
    16 окт 2016 в 16:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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