CODEWITHSUNDEEP
csshtmlhyperlink
al123
al123

Reputation: 569

added link to image and text only

i have added a link to 6 images, with links to text as well. however the space next to the image is also click able which i don't want.

css:

#testimage a {width: 100%;  height: 100%;display: block;}
#testimage1 a {width: 100%;  height: 100%;display: block;}
#testimage2 a {width: 100%;  height: 100%;display: block;}
#testimage3 a {width: 100%;  height: 100%;display: block;}
#testimage4 a {width: 100%;  height: 100%;display: block;}
#testimage5 a {width: 100%;  height: 100%;display: block;}
#testimage6 a {width: 100%;  height: 100%;display: block;}

  #a1 a
 {position: absolute;font-size: 25px;fcolor: #085da2;top: 503px;}
 #a1 a:hover
 {color:#085da2;opacity:0.5;}

as you will see there the linking is not working properly for the images. as i only want image and text to be link, and nothing else, no white space!

any ideas

Upvotes: 0

Views: 68

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

There are a couple of ways to do this.

Codepen Demo (of both)

Firstly, just using a simple anchor tag inside the div with your text inside a heading tag

HTML

<div class="bg-image">
  <a href="#"><h3>Events</h3></a>
</div>

CSS

.bg-image a {
  height: 205px;
  width: 322px;
  border-style: solid;
  border-width: 3px;
  border-color: #9ad499;
  margin-bottom: 7px;
  border-radius: 10px;
  position: relative;
  display:block;
  text-decoration:none;
  background-image: url(http://mja.anytimeafter9.co.uk/sites/all/themes/MedicalJournalistsAssociation/images/mja1.jpg);
}

.bg-image a h3 {
  position:absolute;
  text-align:center;
  width:100%;
  bottom:0;
  color:black;
}

The other relies on more structure and an inline image (that is, in the HTML itself)

HTML

<div class="inline-image">
  <a href="#">
    <img src="  http://mja.anytimeafter9.co.uk/sites/all/themes/MedicalJournalistsAssociation/images/mja1.jpg" alt="" />
    <h3>Events</h3>
  </a>
</div>

CSS is similar with a couple of changes

.inline-image a {
  display: block;
  margin-left:10px;
  border-style: solid;
  border-width: 3px;
  border-color: #9ad499;
  margin-bottom: 7px;
  border-radius: 10px;
  position: relative;
}

.inline-image img {
  display: block;
  border-radius: 10px;
}

.inline-image a h3 {
  position:absolute;
  text-align:center;
  width:100%;
  bottom:0;
  color:black;
}

Upvotes: 1

Related Questions