Linking image and title with URL-CodePudding

Good Evening,

I haven't probably been very clear in my explanation, so I have edited!

I have an image (which if you click takes you to a website). What I ALSO need is the text underneath that image) to also link to the same website. I don't want them to be 2 separate links, they need to be joined some how.

A good example is the BBC News where you can click EITHER the image or the text and it diverts you to the relevant URL.

Here is my HTML:

<div class = "image1">
<a href = 
"https://wwww.this isamade uplink"> 
<img src="2.jpeg" width="150" height="200" alt="Made up image name" 
>Test to display
</a>
</div>

Here is my CSS:

.image1 {
 position: absolute;
 left: 10px;
 top: 200px;
 display: flex;
 flex-direction: column;
 }

CodePudding user response：

You can use text-indent , display and float.

display for a , so it can wrap a floatting element and apply text-indent
float for the img , so it does not react to text-indent, only the text and inline non floatting element will be concerned.

Live example :

.image1 a {
  display: inline-block;
  text-indent: -100vw;/* hudge value sending text and inline tags far outside the screen */
}

.image1 a img {
  float: left;
}

<div class="image1">
  <a href="#">
    <img src="https://dummyimage.com/150x200" width="150" height="200" alt="Made up image name">Testing
  </a>
</div>

CodePudding user response：

My previous answer was the 'correct' way to do it. However, if you want give them both the same url and only use one, you can simply wrap your a tag around both the title and the image. This will link both to whatever URL is in your #URL placeholder.

.image1 {
 position: absolute;
 left: 10px;
 top: 0px;
 display: flex;
 flex-direction: column;
 }
 
 .title-name {
 font-weight: bold;
 position: absolute;
 top: 200px;
 left: 60px;
}

<div>
  <a href="#URL"><img src="https://www.mooreseal.com/wp-content/uploads/2013/11/dummy-image-square.jpg" width="150" height="200" alt="alt-text" title="title on hover" class="image1">
   <h3 class="title-name">Title</h3>
  </a>
</div>