Is there any way to position a linked text ON an image?

Question

I created an image grid with varying heights and lengths. I wanted to position a text linked to another website on each image with a zoom animation.

I tried putting the link inside an anchor tag surrounded by a div. However, even though the text appeared on the image container, the link did not work. Here is my code:

body{
    margin:20px;
    padding:0;
    text-align:center;
}
.container{
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-auto-rows:100px 300px;
    grid-gap:10px;
    grid-auto-flow: dense;
}

.gallery-item{
    width:100%;
    height:100%;
    position:relative;
}

.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-item .image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}
.gallery-item:hover .image img{
    transform:scale(1.1);
}

.gallery-item .text{
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#000;
    font-size:25px;
    font-family: Courier;
    pointer-events:none;
    z-index:4;
    transition: .1s ease-in-out;
    -webkit-backdrop-filter: blur(2px) saturate(1.8);
    backdrop-filter: blur(5px) saturate(1.8);
}

.gallery-item:hover .text{
    opacity:1;
    animation: move-down .3s linear;
    padding:1em;
    width:100%;
    }

.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}




@media screen and (max-width:500px){
    .container{
        grid-template-columns: repeat(1,1fr);
    }
    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        grid-column:span 1;
    }
}


@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="grid-gallery.css" media="all">
  <title>CSS Grid</title>
</head>

<body>

  <h1>CSS Grid Gallery</h1>
  <div class="container">

    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="https://source.unsplash.com/1600x900/?nature" alt="nature">
        </div>
        <div class="text">
        <a href="https://www.youtube.com/">Nature</a>
        <h6>CLICK TO VIEW</h6>
        </div>
      </div>
    </div>

    <div class="gallery-container w-3 h-3">
      <div class="gallery-item">
        <div class="image">
          <img src="https://source.unsplash.com/1600x900/?people" alt="people">
        </div>
       <div class="text">
        <a href="https://www.youtube.com/">Nature</a>
        <h6>CLICK TO VIEW</h6>
        </div>
      </div>
    </div>
    <div class="gallery-container h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="https://source.unsplash.com/1600x900/?sport" alt="sport">
        </div>
        <div class="text">
        <a href="https://www.youtube.com/">Sport</a>
        <h6>CLICK TO VIEW</h6>
        </div>
      </div>
    </div>

    <div class="gallery-container w-2">
      <div class="gallery-item">
        <div class="image">
          <img src="https://source.unsplash.com/1600x900/?fitness" alt="fitness">
        </div>
        <div class="text">
        <a href="https://www.youtube.com/">Fitness</a>
        <h6>CLICK TO VIEW</h6>
        </div>
      </div>
    </div>

    <div class="gallery-container w-4 h-1">
      <div class="gallery-item">
        <div class="image">
          <img src="https://source.unsplash.com/1600x900/?food" alt="food">
        </div>
      <div class="text">
        <a href="https://www.youtube.com/">Food</a>
        <h6>CLICK TO VIEW</h6>
        </div>
      </div>
    </div>

    <div class="gallery-container">
      <div class="gallery-item">
        <div class="image">
          <img src="https://source.unsplash.com/1600x900/?travel" alt="travel">
        </div>
        <div class="text">
        <a href="https://www.youtube.com/">Travel</a>
        <h6>CLICK TO VIEW</h6>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

Also is there any way I can style the link too? I hate the color.

I am new to both HTML and CSS so please answer the question in a way a beginner can understand. Edit: I update this to the full code.

Could you put a bit more into your code,perhaps include some more images, because I'm unlcear how this works as a gallery/grid given the element with class gallery container (and what look like two additional spurious classes - ?picked up from bootstrap?). And is the htref value correct (I note it is another jpg rather than a 'general' website sort of address). — A Haworth, Dec 27 '22 at 09:26
Nature did you intentionally put "nature.jpg" as the href ? if not put your website url in href Nature — Nishan Nilupul, Dec 27 '22 at 10:25
@AHaworth I've updated the code snippet to the full html and also yes, it is linked to a general website. — Ada, Dec 27 '22 at 15:33
@NishanNilupul I've included the website url in the code, but it's still not working. Any ideas why? — Ada, Dec 27 '22 at 15:34

strawberrymilk · Accepted Answer · 2022-12-27T10:47:31.783

1

If I understand your question correctly, your link isn't working because your CSS has .gallery-item .text {pointer-events:none}. Either remove the pointer-event rule, or add a {pointer-events:auto}

edited Dec 27 '22 at 10:47

answered Dec 27 '22 at 10:36

strawberrymilk

392
2
10

Thank you so much! This really helped. I didn't realize that detail because I'd copied the css from another template. – Ada Dec 27 '22 at 15:41
@Ada did this solve all your problem? Please mark as accepted if so. – A Haworth Dec 28 '22 at 06:48

MaxiGui · Answer 2 · 2022-12-27T11:05:25.410

For link, you need to use element a (doc: The Anchor element) around your image:

<a href="https://dummyimage.com" class="zoom">
  <img src="https://dummyimage.com/600x400/000/fff" alt="nature">
</a>

(It exists other solution using JS with "onClick" event, if this is what interest here, you can check this question)

For the zoom I copy past my code from my answer and added to your code:

/*ADDED*/
 .zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  position:absolute;
  right:0;
}

DEMO

.container{
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-auto-rows:100px 300px;
    grid-gap:10px;
    grid-auto-flow: dense;
}

.gallery-item{
    width:100%;
    height:100%;
    position:relative;
}

.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-item .image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}
.gallery-item:hover .image img{
    transform:scale(1.1);
}

.gallery-item .text{
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:25px;
    pointer-events:none;
    z-index:4;
    transition: .4s ease-in-out;
    -webkit-backdrop-filter: blur(1px) saturate(1.8);
    backdrop-filter: blur(1px) saturate(1.8);
}

.gallery-item:hover .text{
    opacity:1;
    animation: move-down .3s linear;
    padding:1em;
    width:100%;
}

.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}




@media screen and (max-width:500px){
    .container{
        grid-template-columns: repeat(1,1fr);
    }
    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        grid-column:span 1;
    }
}


@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}

/*ADDED*/
 .zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  position:absolute;
  right:0;
}

<section id="featured-blogs" class="section-p1">
<h3 style="text-align:center">FEATURED</h3>
<br>

<div class="container">

  <div class="gallery-container w-3 h-2">
    <div class="gallery-item">
      <div class="image">
        <a href="https://dummyimage.com" class="zoom">
          <img src="https://dummyimage.com/600x400/000/fff" alt="nature">
        </a>
      </div>
      <div class="text"><a href="nature.jpg">Nature</a></div>
    </div>
  </div>

The question asks why the link text did nothing when clicked. It does have an anchor element. As @strawberrymilk has pointed out there is a pointer-events: none which prevents the click having an effect. — A Haworth, Dec 28 '22 at 06:47
@AHaworth I answered the question 2 days ago and it was not any link into the code given by OP, as you can the edited version. But I am glad that he found its answer. — MaxiGui, Dec 29 '22 at 12:29

Is there any way to position a linked text ON an image?

2 Answers2

DEMO