CODEWITHSUNDEEP
htmlcss
mohammad al nesef
mohammad al nesef

Reputation: 37

How can I add a href to an entire figure

I have the following html snippet:

 <figure>
        <img src='image.png' height="250" width="250">
        <figcaption>Album name goes here
            <br>Year goes here
        </figcaption>
</figure>

And the following css:

figure {
    display: inline-block;
    border: 1px;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    border: 1px;
    text-align: center;
}

It would end up looking like this:

enter image description here

How can I set it up so that if a user clicks on the image or the caption under it they get directed to a new page.

Upvotes: 2

Views: 2410

Answers (2)

sameera lakshitha
sameera lakshitha

Reputation: 1971

You can use <a target="_blank" href="link_here">your image code</a> Also you need to use target="_blank" to open new browser window.

<figure>
  <a target="_blank" href="your_link_here">
    <img src='image.png' height="250" width="250">
    ...
    ...
  </a>
</figure>

Upvotes: 0

barbaart
barbaart

Reputation: 867

You can just put it inside an anchor tag like:

<figure>
    <a href="https://www.google.com">
    <img src='image.png' height="250" width="250">
        <figcaption>Album name goes here
            <br>Year goes here
        </figcaption>
    </a>
</figure>

Upvotes: 2

Related Questions