dimitrifayard Posted January 1, 2021 Share Posted January 1, 2021 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 <div class="body"> <div class="box"> <img src="image.jpg"> <span>Pastry/</span> </div> <div class="box"> <img src="image.jpg"> <span>Confection/</span> </div> <div class="box"> <img src="images.jpg"> <span>Meet/</span> </div> </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
tuanphan Posted January 1, 2021 Share Posted January 1, 2021 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
dimitrifayard Posted January 1, 2021 Author Share Posted January 1, 2021 It only worked for the first pictures, not all 3. Here is the link, HOME page. Password: 01012021 Link to comment
tuanphan Posted January 1, 2021 Share Posted January 1, 2021 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
dimitrifayard Posted January 1, 2021 Author Share Posted January 1, 2021 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
dimitrifayard Posted January 1, 2021 Author Share Posted January 1, 2021 @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
tuanphan Posted January 1, 2021 Share Posted January 1, 2021 Your code contains invalid " character. Use this code dimitrifayard 1 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
dimitrifayard Posted January 1, 2021 Author Share Posted January 1, 2021 Thank you! All set Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment