Hi this is similar question to my last one but diffrent.

I am trying to add text to a href'd image inside a div tag.

When you click on the image only orange is shown. I would appreciate for someone to help me add text below image.

The scenario is when you click a picture you are presented with nice view. Small things are the hardest..

Desired output after clicking:

.class2 {
  position:relative;
  width:25%;
  height:100%;
  min-height:100%;
  background-size: cover;
  background: url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg');
}
.class2:after {
  width:100%!important;
  height:100%!important;
  background-size: cover!important;
  content: '';
  opacity: 0;
  position:absolute;
  z-index:1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  transition: opacity .3s;
  background: url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg');
}
.services .icon-box {
  text-align: center;
  border: 1px solid #ebebeb;
  padding: 80px 20px;
  transition: transform 0.3s ease-in-out 0s;
  border-radius: 4px;
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: #009ee3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.services .icon-box .icon i {
  color: #151515;
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.services .icon-box h4 a {
  color: #fff;
  transition: ease-in-out 0.3s;
}

.services .icon-box h4 a:hover {
  color: #FFC451;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .icon-box:hover {
  border-color: #fff;
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" class="" data-tooltip="asdasdas" title="Web 3" >
                  <div class="icon-box class2">
                  <h4>Wassup</h4>
  <br/><br/><br/><br/>
                  </div>
                </a>

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

CodePudding user response：

Not trivial since you are messing with pseudo elements

This one will take the image source from the anchor tag and the text from the header tag - but otherwise pretty much the same as my previous answer

const res = document.getElementById("res");
document.querySelector("a div.icon-box").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("icon-box")) {
    e.preventDefault(); // stop the link
    const src = tgt.closest("a").href; // cannot get the backgeound image of a pseudo element
    const text = tgt.querySelector("h4").textContent;
    res.innerHTML = `<div style="text-align:center"><img src="${src}" /><br><span>${text}</span></div>`
    res.hidden = false;
  }
})

#res {
  position: absolute;
  top: 0;
  left: 0;
}

.class2 {
  position: relative;
  width: 25%;
  height: 100%;
  min-height: 100%;
  background-size: cover;
  background: url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg');
}

.class2:after {
  width: 100%!important;
  height: 100%!important;
  background-size: cover!important;
  content: '';
  opacity: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  transition: opacity .3s;
  background: url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg');
}

.services .icon-box {
  text-align: center;
  border: 1px solid #ebebeb;
  padding: 80px 20px;
  transition: transform 0.3s ease-in-out 0s;
  border-radius: 4px;
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: #009ee3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.services .icon-box .icon i {
  color: #151515;
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.services .icon-box h4 a {
  color: #fff;
  transition: ease-in-out 0.3s;
}

.services .icon-box h4 a:hover {
  color: #FFC451;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .icon-box:hover {
  border-color: #fff;
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

<a href="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" class="" data-tooltip="asdasdas" title="Web 3">
  <div class="icon-box class2">
    <h4>Wassup</h4>
    <br/><br/><br/><br/>
  </div>
</a>
<div id="res" hidden></div>

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