Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Link on images in flex


dimitrifayard

Question

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
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

7 answers to this question

Recommended Posts

  • 0

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.

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

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
  • 0
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
  • 0

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