Here's the updated FIDDLE
Your HTML should look like this (I only added the button):
<a class="fragment" href="google.com">
<button id="closeButton">close</button>
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
and you should add the following CSS:
.fragment {
position: relative;
}
#closeButton {
position: absolute;
top: 0;
right: 0;
}
Then, to make the button actually work, you should add this javascript:
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
}, false);
We're using e.preventDefault()
here to prevent the anchor from following the link.