can you make an

Hi All,

I think this is the best place to post this since it says css and html under the title so here it goes:

This is my html:

<div style="float:left;width:46%;">

<article class="caption">
<img class="caption__media" src="https://www.theljdesigns.com/wp-content/uploads/2015/07/HtmlSlidersizetest3-960x296.png" /> </a>
    <div class="caption__overlay">
         <a href="https://www.theljdesigns.com/work/illustration/" > <h1 class="caption__overlay__title">Illustration</h1></a>

<p style="margin-left: 30px;" class="caption__overlay__content"> caption message</p>

</article>

</div>

<div style="float:right;width:46%;">
<article class="caption">
    <img class="caption__media" src="https://www.theljdesigns.com/wp-content/uploads/2015/07/HtmlSlidersizetest3-960x296.png" />
    <div class="caption__overlay">
       <a href="https://www.theljdesigns.com/work/design/" ><h1 class="caption__overlay__title">Design</h1> </a>
        <p style="margin-left: 30px;" class="caption__overlay__content"> Caption Message</p>
    </div>
</article>

<div>

It divides the sections into two and then sets up the text to be overlaid over the image

My css does a lot of css-y things including darkening the image and making it so that it lightens when hovered over.

.caption {
	position: relative;
	overflow: hidden;
}

.caption__media {
	display: block;
/*contains overlay to block*/
	min-width: 100%;
	max-width: 100%;
	height: auto;
}

.caption__overlay {
/*all Text overlay*/
	position: absolute;
/* Title and sub caption alignment*/
	top: 0;
/* Title and sub caption alignment*/
	right: 0;
/* Title and sub caption alignment*/
	bottom: 0;
/* Title and sub caption alignment*/
	left: 0;
/* Title and sub caption alignment*/
	padding: 10px;
/* Title and sub caption alignment*/
	color: white;
/*title*/
/*	text-shadow: 0 1px 0 black; - an option to give the text a drop shadow*/
}

.caption__overlay__title {
/*Overwrited .caption overlay for Title*/
	margin: 0;
	color: White;
}

.caption::before {
	content: ' ';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.7);
}

.caption:hover::before {
	text-shadow: 0 1px 0 black;
	background: rgba(0,0,0,.2);
}

This is great, but it would make my little heart skip a beat of delight if someone could tell me how i could make the entire square image+text combo a hyper link to another page; right now only the text overlaid onto of the image is a hyper link. I don’t know what i’m over looking, maybe i’ve just stared at it too long …

Anyway, can you even make an <img class a hyper link? Please help … i feel like there is a relatively straight forward solution that is escaping me …

( oh and i do know that i can make an image a hyper link like so:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

– thanks for your concern, but that’snot what i’m looking for – i tried that and its not working out.)

Thanks in advance,

lizzyxh