Как сделать такую вещь при наведении на картинку

javascript'ом. На onload вешается достроение html. К сожалению конкретики маловато, что нужно, полупрозрачная картинка, лайтбокс, ссылку прописать...

javascript (jquery) css по событию hover 🍿 эффектов полно, что вам лично надо не очень понятно :)

https://yandex.ru/search/?text=css%20%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B%20%D0%B4%D0%BB%D1%8F%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9&lr=2 🍿

jquery на примере opacity:

$('img').hover(

  function() {

    $( this ).css({'opacity':'0.5'});

  }, function() {

    $( this ).css({'opacity':'1'});

  }

);

Если надо фото на фото наложить, то юзайте img невидимый position absolute и по hover hide/show c opacity самой фотки.

<a href=""><img src="" /><img src="" class='hover'/></a>

$('a').hover(

  function() {

    $( this ).children('.hover').show().css({'opacity':'0.5'});

  }, function() {

    $( this ).children('.hover').hide();

  }

);

Если не ошибся нигде в коде должно работать 🤪

css

a

{

width: 100px;

height: 100px;

position: relative;

}

.hover

{

 position: absolute;

top 0px;

left: 0px;

width: 100px;

height: 100px;

}

А если как здесь?

http://jsbin.com/fader/1/edit?html,css,output

  <figure>

    <img src="http://placeimg.com/300/200" alt="">

    <figcaption>Text Title</figcaption>

  </figure>

В css

figure {

  width: 300px;

  height: 200px;

  margin: 0 auto;

  padding: 0;  

  text-align: center;  

  position: relative;

  border: 1px solid #bbb;

}



img {

  max-width: 100%;

  height: auto;

}



figcaption {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 1em;

  color: #fff;

  background: rgba(0,0,0,.5);

  opacity: 0;

  transition: opacity .7s;

  cursor: pointer;

  font: 32px sans-serif;

  letter-spacing: 3px;

}



figure:hover figcaption {

  opacity: 1;

}

xpycteamset, а оно везде работает? У вас красивей, но мой пример короче и можно все эффекты ставить, не только фон :) Но смысл тот же :)

ziliboba0213, в не устаревших браузерах должно работать.

Это тоже-самое что выпадающее меню на чистом css. Многие практикуют, и работает на ура.

На ксс красивее, конечно. :) Но мой пример кроссбраузерный :p

ziliboba0213, А какие эффекты еще можно поставить? А так если можно обойтись без

javascript (jquery) то лучше наверное обойтись ))

Ну ксс быстрей скорей всего, это да. Но если магазин небольшой, то jquery подойдет, там писанины в коде меньше :p

https://yandex.ru/search/?lr=2&msid=22892.3210.1453589694.71752&text=jquery%20hover%20%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B

ziliboba0213, а нельяз просто через css юзая эти ::after ::before или как там их зовут)))