Jump to content

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

Top Posters In This Topic

Popular Days

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.