Jump to content

Link on images in flex

Recommended Posts

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

}

 

Link to comment
  • Replies 7
  • Created
  • Last Reply

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

Link to comment

@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>

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.