Home > Back-end >  how can i add link to these box
how can i add link to these box

Time：11-05

i want to link each box to different link. whole box not only content or image so if user try to click any of these will be sent to the link applied . i have tried putting a tag on these box but my box color changes and things go wrong. need help pls

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 500px;
    display: flex;
}
.container .box{
    position: relative;
    width: 33.33%; /*Change Applied*/
    height: 500px;
    background: #ccc;
    transition: 0.5s;
}
.container .box:hover{
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.container .box:nth-child(odd) .thumb {
    bottom: 0;
    left: 0;
}
.container .box .thumb img{
    width: 100%;
}
.container .box .details{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #262626;
}
.container .box:nth-child(even) .details {
    bottom: 0;
    left: 0;
}
.container .box:nth-child(1) .details {
    background: #65214a;
}
.container .box:nth-child(2) .details {
    background: #fd3f41;
}
.container .box:nth-child(3) .details {
    background: #ffb539;
}
.container .box .details .content{
    position: absolute;
    top: calc(50%   16px);
    transform: translateY(-50%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.5s;
}
.container .box:hover .details .content{
    top: calc(50%);
}
.container .box .details .content h3{
    margin: 0;
    padding: 0;
    padding: 10px 0;
    color: #fff;
}
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="activity.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> i want to link each box to different link. whole box not only content or image so if user try to click any of these will be sent to the link applied . i have tried putting a tag on these box but my box color changes and things go wrong. need help pls

CodePudding user response：

I think your problem is applying styles that need to be applied to the direct child of .container to divs inside <a> tags. You can replace the <div>s with <a>s.

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 500px;
    display: flex;
}
.container .box{
    position: relative;
    width: 33.33%; /*Change Applied*/
    height: 500px;
    background: #ccc;
    transition: 0.5s;
}
.container .box:hover{
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.container .box:nth-child(odd) .thumb {
    bottom: 0;
    left: 0;
}
.container .box .thumb img{
    width: 100%;
}
.container .box .details{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #262626;
}
.container .box:nth-child(even) .details {
    bottom: 0;
    left: 0;
}
.container .box:nth-child(1) .details {
    background: #65214a;
}
.container .box:nth-child(2) .details {
    background: #fd3f41;
}
.container .box:nth-child(3) .details {
    background: #ffb539;
}
.container .box .details .content{
    position: absolute;
    top: calc(50%   16px);
    transform: translateY(-50%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.5s;
}
.container .box:hover .details .content{
    top: calc(50%);
}
.container .box .details .content h3{
    margin: 0;
    padding: 0;
    padding: 10px 0;
    color: #fff;
}
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="activity.css">
</head>
<body>
    <div class="container">
        <a href="#" class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                </div>
            </div>
        </a>
        <a href="#" class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                </div>
            </div>
        </a>
        <a href="#" class="box">
            <div class="thumb">
                <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
            </div>
            <div class="details">
                <div class="content">
                    <img src="/images/facebook.png" alt="">
                    <h3>Desert Safari</h3>
                </div>
            </div>
        </a>
    </div>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you can change the div to <a then you could style the link

Otherwise use JavaScript:

const links = ["https://www.apple.com/us/search/mac", "https://www.apple.com/us/search/iphone", "https://www.apple.com/us/search/ipad"];
document.querySelectorAll(".container .box").forEach((box, i) => box.dataset.idx = i);
document.querySelector(".container").addEventListener("click", function(e) {
  const tgt = e.target.closest(".box");
  if (tgt) {
    location = links[tgt.dataset.idx]
  }  
})
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 500px;
  display: flex;
}

.container .box {
  position: relative;
  width: 33.33%;
  /*Change Applied*/
  height: 500px;
  background: #ccc;
  transition: 0.5s;
}

.container .box:hover {
  transform: scale(1.1);
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 1);
}

.container .box .thumb {
  position: absolute;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.container .box:nth-child(odd) .thumb {
  bottom: 0;
  left: 0;
}

.container .box .thumb img {
  width: 100%;
}

.container .box .details {
  position: absolute;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #262626;
}

.container .box:nth-child(even) .details {
  bottom: 0;
  left: 0;
}

.container .box:nth-child(1) .details {
  background: #65214a;
}

.container .box:nth-child(2) .details {
  background: #fd3f41;
}

.container .box:nth-child(3) .details {
  background: #ffb539;
}

.container .box .details .content {
  position: absolute;
  top: calc(50%   16px);
  transform: translateY(-50%);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  transition: 0.5s;
}

.container .box:hover .details .content {
  top: calc(50%);
}

.container .box .details .content h3 {
  margin: 0;
  padding: 0;
  padding: 10px 0;
  color: #fff;
}
<!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">
  <title>Document</title>
  <link rel="stylesheet" href="activity.css">
</head>

<body>
  <div class="container">
    <div class="box">
      <div class="thumb">
        <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
      </div>
      <div class="details">
        <div class="content">
          <img src="/images/facebook.png" alt="">
          <h3>Desert Safari</h3>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="thumb">
        <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
      </div>
      <div class="details">
        <div class="content">
          <img src="/images/facebook.png" alt="">
          <h3>Desert Safari</h3>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="thumb">
        <img src="https://m.media-amazon.com/images/I/81z07Nvam1L._SL1500_.jpg" alt="">
      </div>
      <div class="details">
        <div class="content">
          <img src="/images/facebook.png" alt="">
          <h3>Desert Safari</h3>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use "a" tag like this:

<a href="<your_link>">
   <your content>
</a>

Page link：https//www.codepudding.com/Backend/178973.html

Prev:v-slot:opposite doesn't work. vuetify timeline item
Next:Conditional arguments to extract data from HTML
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding