Adding link to HTML image with animated background over top-CodePudding

I have this html to create an image which, when hovered over displays the text in the content/tagline divs:

<div >
    <a href="albums/Armed Forces Day 2022.html"  style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"></a>
    <img src="src/img/albums/Armed Forces Day 2022/RAF Falcons underneath parachute canopy.JPG"></img>
    <div >Armed Forces Day Scarborough 2022</div>
    <div >2022</div>
</div>

I have this CSS in order to animate the overlay on the image:

    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 7px;
    margin-bottom: 7px;
    position: relative;
    overflow: hidden;
}

.img-wrapper > img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.img-wrapper > .content {
    position: absolute;
    inset: 0;
    font-size: 36px;
    font-family:'Bebas Kai', Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background: rgba(41, 41, 41, .8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper > .tagline {
    position: absolute;
    inset: 0;
    margin-top: 100px;
    font-size: 28px;
    font-family:'Bebas Kai', Arial, Helvetica, sans-serif;
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper > img,
.img-wrapper > .content,
.img-wrapper > .tagline {
    transition: 200ms ease-in-out;
}

.img-wrapper > .content.fade,
.img-wrapper > .tagline.fade {
    opacity: 0;
}

.img-wrapper:hover > .content.fade,
.img-wrapper:hover > .tagline.fade {
    opacity: 1;
}

The aim is when the image is clicked, it links to another html page on my portfolio. I've attempted to put the link in the div, on the image, and in a separate div which contains the content & tagline, however it doesn't work on the webpage.

CodePudding user response：

I think this is what you need. You just had to wrap the whole section with the anchor tag.

.img-wrapper {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 7px;
    margin-bottom: 7px;
    position: relative;
    overflow: hidden;

}


.img-wrapper>img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.img-wrapper>.content {
    position: absolute;
    inset: 0;
    font-size: 36px;
    font-family: 'Bebas Kai', Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background: rgba(41, 41, 41, .8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper>.tagline {
    position: absolute;
    inset: 0;
    margin-top: 100px;
    font-size: 28px;
    font-family: 'Bebas Kai', Arial, Helvetica, sans-serif;
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper>img,
.img-wrapper>.content,
.img-wrapper>.tagline {
    transition: 200ms ease-in-out;
}

.img-wrapper>.content.fade,
.img-wrapper>.tagline.fade {
    opacity: 0;
}

.img-wrapper:hover>.content.fade,
.img-wrapper:hover>.tagline.fade {
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css" />
    <title>Document</title>
</head>

<body>
    <a href="albums/Armed Forces Day 2022.html" 
        style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;">
        <div >

            <img
                src="https://images.unsplash.com/photo-1658495679082-a88dc0818e4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"></img>
            <div >Armed Forces Day Scarborough 2022</div>
            <div >2022</div>
        </div>
        </section>
    </a>
</body>

</html>

CodePudding user response：

If i understand you correctly you want the image to be inside the link (inside the <a> element)

I think you should use a markup more like this:

<a href="albums/Armed Forces Day 2022.html" >
    <img src="src/img/albums/Armed Forces Day 2022/RAF Falcons underneath parachute canopy.JPG""  />
    <div >Armed Forces Day Scarborough 2022</div>
    <div >2022</div>
</a>

I made you here an example of what i mean: https://jsfiddle.net/bvjows06/

This would allow you to click on any of the elements inside the <a>. You would need to change the css to change the content and the tagline when you hover the .image-link, but i think that is something you can do on your own!