Add Permalink to Post Thumbnail

First of all, whatever design we do, don’t forget to test it in mobile (small screen).

Now to answer the question: the main reason why the image is not clickable is because it’s absolute positioned and the div below it has this large top padding, so this padding occupied all the image area.

There is other info that you need to know about stacking order. The opacity (or grayscale effect) on image will mess with natural stacking order of elements.

Instead of what you have now for these 3 selectors, use this version, it works (I tested it using Chrome web dev tool).

.latest-leaflet {
	position: relative;
	margin: 5px 0;
}

.latest-leaflet img {
	margin-bottom: -80px;
}

.latest-leaftlet-detail {
	padding: 0 5% 0;
	z-index: 1;
	position: relative;
}