Как сделать псевдокласс на прозрачность картинки + при наведении курсора иметь активную ссылку используя bootstrap 4?

Question

[ElvisP]

Не знаю правильно сформулировал вопрос или нет, ну в общем голова уже не варит.
Имеется такой код BootStrap 4:

<div class="card noborder">
	<img src="/картинка" class="card-img" >
	<div class="card-img-overlay">
		<h4 class="card-title"><a href="google.com">Траляляля ля я ссылка</a></h4>
	</div>
</div>

Нужно впихнуть вот это -
https://codepen.io/craigocurtis/pen/KzXYad
Интересует хомяк на второй картинке =)

На выхлопе пытаюсь получить - Затемненную картинку с текстом прижатым к нижнему левому краю.
При наведении курсора текст никак себя не ведет, картинка становится светлее + блок целиком работает как активная ссылка.

Answer 1

[Николай]

CodePen

Comments

[ElvisP]

Спасибо! Все четко, единственное это то что блок не как ссылка.. ну да ладно и так отлично!

[Николай]

ElvisP, убери у ссылки display: block