1

Ребята,как сделать такое жевведите сюда описание изображения.Нужно,чтобы при наведении на объект каталога(код увидите ниже),появлялась надпись сверху и картинка(сверху и снизу).

P.S как сделать так,чтобы при наведении на объект каталога появлялся черный фон сверху (прозрачность половина примерно) и иконка лупы на нем(увеличить изображение) мой код

.a1-block {
  position: relative;
  margin: 20px;
  width: 380px;
  height: 250px;
}

.a1-block:hover {}
<article style="display: flex;
	                flex-direction: row;
	                padding-top: 50px;
	                position: relative;">


  <div class="a1-block" style="
		background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg); 
		background-size: cover;
		background-position: center;">

  </div>

  <div class="a1-block" style="
		background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg); 
		background-size: cover;
		background-position: center;">

  </div>

  <div class="a1-block" style="
		background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg); 
		background-size: cover;
		background-position: center;">

  </div>
</article>

Все это дело обернуто в фиксированный фрэппер с марджин 0 авто

5
  • @VladSpirin а js тут на кой?
    – Air
    19 дек 2017 в 8:34
  • @ChelokovAmyr посмотрите тему css про псевдоклассы тут
    – user262779
    19 дек 2017 в 8:42
  • да знаю я про псевдоклассы.в том то и дело.эта штука не получается.не могу сделать.по идее это обычный ксс с псеводклассами 19 дек 2017 в 8:44
  • @ChelokovAmyr прозрачность добавляешь или через opacity или через альфа-канал цвета.
    – user262779
    19 дек 2017 в 9:00
  • и да нужны псевдоэлементы еще
    – user262779
    19 дек 2017 в 9:02

2 ответа 2

0

article {
  display: flex;
  flex-direction: row;
  padding-top: 50px;
  position: relative;
}

.a1-block {
  overflow: hidden;
  position: relative;
  margin: 20px;
  width: 380px;
  height: 250px;
  background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg);
  background-size: cover;
  background-position: center;
}

.block {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: transparent;
  width: 100%;
  height: 100%;
  transition: background .3s .3s;
}

.a1-block:hover .block {
  position: absolute;
  background: rgba(0, 0, 0, .3);
  width: 100%;
  height: 100%;
  transition: background .3s;
}

p {
  width: 100%;
  height: 50px;
  text-align: center;
  transform: translateY(-50px);
  transition: transform .3s;
}

.a1-block:hover p {
  width: 100%;
  height: 50px;
  text-align: center;
  transform: translateY(0);
  transition: transform .3s .3s;
}

.foto {
  width: 100%;
  height: 50px;
  text-align: center;
  transform: translateY(200px);
  transition: transform .3s;
}

.a1-block:hover .foto {
  width: 100%;
  height: 50px;
  text-align: center;
  transform: translateY(140px);
  transition: transform .3s .3s;
}
<article>
  <div class="a1-block">
    <div class="block">
      <p>надпись</p>
      <div class="foto">Картинка</div>
    </div>
  </div>
  <div class="a1-block">
    <div class="block">
      <p>надпись</p>
      <div class="foto">Картинка</div>
    </div>
  </div>
  <div class="a1-block">
    <div class="block">
      <p>надпись</p>
      <div class="foto">Картинка</div>
    </div>
  </div>
</article>

13
  • Не дали человеку самому решить... Он бы решил, а так готовое решение вставит и все, не запомниться даже... Печаль...
    – user262779
    19 дек 2017 в 9:05
  • @VladSpirin, согласен))), но если бы он хотел, вопрос бы не так стоял... это не для него, а для меня и других кому нужен наглядный пример... а хочет он развиваться или нет решать ему... каждый найдет для себя то что ищет...
    – Air
    19 дек 2017 в 9:07
  • А вот за эти слова + 5млн! Согласен с вами на все 100%. Есть же и другие, про них я как-то не думал. Просто тут на "стаке" много таких вопросов и очень многим даже не интересно разобраться в вопросе и вникнуть в него. Я сам, всегда стараюсь до последнего разбираться, бывает бьюсь по несколько часов, а то и дней над каким-то решением, а уж если совсем грустно, то обращаюсь к знатокам :)
    – user262779
    19 дек 2017 в 9:11
  • @VladSpirin, вот увидишь, он даже ответ ни примет ни один)))))
    – Air
    19 дек 2017 в 9:15
  • Моя позиция в отношении таких вопросов такая (это как-бы обратная сторона): необходимо человеку дать наводки, ссылки на необходимый материал если нужно, ткнуть носом в ошибки и подсказать направление решения, но дальше все-таки человек должен сам. Это ведь пойдет только во благо и снимет в дальнейшем уйму вопросов. И да, скорее не примет... (((
    – user262779
    19 дек 2017 в 9:15
0

Нифига не понял, вам картинку и надпись или черный фон и лупу?

article {
  display: flex;
  flex-direction: row;
  position: relative;
}

.a1-block {
  position: relative;
  margin: 20px;
  width: 380px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.a1-block:hover::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  background-image: url('data:image/svg+xml, <svg style="fill: rgba(255,255,255,.5);" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.832 19.641l-6.821-6.821c2.834-5.878-1.45-12.82-8.065-12.82-4.932 0-8.946 4.014-8.946 8.947 0 6.508 6.739 10.798 12.601 8.166l6.879 6.879c1.957.164 4.52-2.326 4.352-4.351zm-14.886-4.721c-3.293 0-5.973-2.68-5.973-5.973s2.68-5.973 5.973-5.973c3.294 0 5.974 2.68 5.974 5.973s-2.68 5.973-5.974 5.973z"/></svg>');
  background-repeat: no-repeat;
  background-size: 100px 100px;
  background-position: center center;
}
<article>
  <div class="a1-block" style="background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg);"></div>
  <div class="a1-block" style="background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57485.jpg);"></div>
  <div class="a1-block" style="background: url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57486.jpg);"></div>
</article>

1
  • СПАСИБО ЧЕЛ!ТЫ КРУТ 19 дек 2017 в 13:43

Ваш ответ

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

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