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

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:

.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%;
    }
}

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

<div >

  <div >
    <div >
      <div >
        <img src="images/picture.jpg" alt="nature">
      </div>
      <div ><a href="nature.jpg">Nature</a></div>
    </div>
  </div>

I am new to both HTML and CSS so please answer the question in a way a beginner can understand.

CodePudding user response：

For link, you need to use element a around your image:

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

Doc a element: The Anchor element

(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" >
<h3 style="text-align:center">FEATURED</h3>
<br>

<div >

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

CodePudding user response：

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}