Как отобразить изображение поверх изображения при зависании

Question

Я знаю, что на этот вопрос может быть дан ответ несколько раз. Но мне нужно решение, которое работает с любыми изображениями.

У меня есть портфолио с 4 изображениями в нем. Таким образом, он отображает изображения, и я хочу отображать изображение логотипа Github при наведении.

я уже нашел:

a:hover:before { 
    content: ''; 
    display: block; 
    background: rgba(255, 0, 0, .5); /* your background */ 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Но она нуждается в ширину и высоту. Мои изображения не имеют одинаковой высоты, поэтому мне нужен код css/jQuery/angular, который будет соответствовать изображению.

Спасибо!

Answer 1

Попробуйте это, он всегда будет охватывать его родителя. Вы можете редактировать положение фона в соответствии с вашими потребностями.

a:hover:before { 
     content: ''; 
     display: block; 
     background: url('img-path.png') no-repeat; 
     background-position: right bottom; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     right: 0; 
    } 

РЕДАКТИРОВАТЬ: колебались а-тег должен использовать position: relative;