how can i add link to these box

by

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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
</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>

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

Contents hide
Answers:
Method 1
Method 2
Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
</head>
<body>
    <div class="container">
        <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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>

Method 2

If you can change the div class=”box” to <a class="box" 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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
</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>

Method 3

You can use “a” tag like this:

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x