Link on images in flex

Hi,

I would like to insert a link on each images below, I have tried a few options but it changes the layout.

3 flexing images.

Any suggestions?

Thank you

 

1.  
2. <div class="body">
3.   <div class="box">
4.     <img src="image.jpg">  
5.     <span>Pastry/</span>
6.   </div>
7.   <div class="box">
8.     <img src="image.jpg">
9.     <span>Confection/</span>
10.   </div>
11.   <div class="box">
12.     <img src="images.jpg">
13.     <span>Meet/</span>
14.   </div>
15. </div>

//////////////////////////////

.body {

  display: flex;

  width: 100%;

  padding: 4% 2%;

  box-sizing: border-box;

  height: 100vh;

}

 

.box {

  flex: 1;

  overflow: hidden;

  transition: .5s;

  margin: 0 2%;

  box-shadow: 0 20px 30px rgba(0,0,0,.1);

  line-height: 0;

}

 

.box > img {

  width: 200%;

  height: calc(100% - 10vh);

  object-fit: cover; 

  transition: .5s;

}

 

.box > span {

  font-size: 3.8vh;

  display: block;

  text-align: center;

  height: 10vh;

  line-height: 2.6;

}

 

.box:hover { flex: 1 1 50%; }

.box:hover > img {

  width: 100%;

  height: 100%;

}

 

Try editing this

 <div class="box">
    <img src="image.jpg">  
    <span>Pastry/</span>
  </div>

to this

 <div class="box">
    <img src="image.jpg">  
    <span>Pastry/</span>
   <a href="https://beaverhero.com" class="t-link"></a>
  </div>

then add this to Design > Custom CSS

.box {
	position: relative;
}
.t-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

If it doesn't work, please insert the code & share link to page where you insert above html, we can check easier.

It only worked for the first pictures, not all 3.

Here is the link, HOME page. 

Password: 01012021

5 minutes ago, dimitrifayard said:

It only worked for the first pictures, not all 3.

Here is the link, HOME page. 

Password: 01012021

You can apply similar html for 3 pictures. I mean this example (bold text)

<div class="box">
    <img src="image.jpg">  
    <span>Pastry/</span>
   <a href="https://beaverhero.com" class="t-link"></a>
  </div>

3 minutes ago, tuanphan said:

You can apply similar html for 3 pictures. I mean this example (bold text)

<div class="box">
    <img src="image.jpg">  
    <span>Pastry/</span>
   <a href="https://beaverhero.com" class="t-link"></a>
  </div>

I did but must miss something

<div class="body">
  <div class="box">
    <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609183820442-M7YFLHDMU2INEM9GTYB0/Tarte.jpg">  
    <span>Pastry/</span>
<a href="https://clavichord-conch-pchc.squarespace.com/pastry-1" class="t-link"></a>
</div>
  
    
  
  <div class="box">
    <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609122425328-4FLTMMQ0Q4V8GXMUBUNJ/Rubyhome.jpg">
    <span>Confection/</span>
    <a href="https://clavichord-conch-pchc.squarespace.com/confection” class=”t-link”></a>
  </div>

  <div class="box">
    <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609184717152-DIAW6STZC9Q9V3CAGZIC/Home1.jpg">
    <span>Meet/</span>
<a href="https://clavichord-conch-pchc.squarespace.com/about” class=”t-link”></a>
  </div>
</div>

@tuanphan I did but must miss something

<div class="body">
  <div class="box">
    <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609183820442-M7YFLHDMU2INEM9GTYB0/Tarte.jpg">  
    <span>Pastry/</span>
<a href="https://clavichord-conch-pchc.squarespace.com/pastry-1" class="t-link"></a>
</div>
  
    
  
  <div class="box">
    <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609122425328-4FLTMMQ0Q4V8GXMUBUNJ/Rubyhome.jpg">
    <span>Confection/</span>
    <a href="https://clavichord-conch-pchc.squarespace.com/confection” class=”t-link”></a>
  </div>

  <div class="box">
    <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609184717152-DIAW6STZC9Q9V3CAGZIC/Home1.jpg">
    <span>Meet/</span>
<a href="https://clavichord-conch-pchc.squarespace.com/about” class=”t-link”></a>
  </div>
</div>

Your code contains invalid " character. Use this code

 

Thank you! All set