CODEWITHSUNDEEP
htmlcss
lilsolar
lilsolar

Reputation: 39

How can I add a caption to this image in css?

I'm building a website, and I have these two images in mobile view. Their width is 30%. These two images are side by side, like this pic of example

I want to add a little caption below each image.

                    <div class = "unique-img1">
                    <a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc"><img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal"> </a> 
                    <!-- <p class = "caption1"> Three fan model</p> -->
                <div>
                <div class = "unique-img2">
                    <a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I"><img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo"> </a> 
                    <!-- <p class = "caption2"> Tinkercad Link to sailboat model </p> -->
                </div>

css:

   /* code for images in unique section  */
.unique-section img {
    float: left;
    width: 30%;
    height: auto;
}
/* tinkercad image right  */
img.tcimg2 {
    float: right;   
}

.unique-img1 {
    float: left;
    
}

Upvotes: 0

Views: 897

Answers (2)

Labani Das
Labani Das

Reputation: 409

Just uncomment the p tag in your code . It will work as caption then.

 <div class = "unique-img1">
                        <a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc"><img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal"> </a> 
                   <br>     <p class = "caption1"> Three fan model</p>
                    </div>
                    <div class = "unique-img2">
                        <a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I"><img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo"> </a> 
                    <br>    <p class = "caption2"> Tinkercad Link to sailboat model </p> 
                    </div>

In case you want your caption to be a hyperlink like your image, just place the p tag after the img tag (both inside an a tag ).

    <div class = "unique-img1">
                                <a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc">
    <img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal">
 <br>   <p class = "caption1"> Three fan model</p>
     </a> 
     </div>
                            <div class = "unique-img2">
                                <a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I">
        <img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo"> 
      <br>  <p class = "caption2"> Tinkercad Link to sailboat model </p>
        </a> 
                                 
                            </div>

Upvotes: 1

Asif Jalil
Asif Jalil

Reputation: 762

<div class = "unique-section">
  <div class = "unique-img1">
    <a href ="https://www.tinkercad.com/things/5eLpG1ckaVV-big-man-hoverboard-jam-final-/editel?sharecode=2xiGuCn3iHM6gQ_TZ1J2N_CHOzqMCqCwx5fIz0WU2Sc">
      <img class = "tcimg1" src = "img/tinkercadimg.png" alt = "tinker cad link 1 normal"> 
    </a> 
    <p class = "caption1"> Three fan model</p>
  <div>
                
  <div class = "unique-img2">
    <a href ="https://www.tinkercad.com/things/4zLV1NfIvHD-copy-of-sailboat-2-back-fan-1-base-fan/editel?sharecode=i4cV464Cnu0kmQByOnSVp5WCgOQJZHWV0wGtW6Oa00I">
      <img class = "tcimg2" src = "img/tinkercadimg.png" alt = "tinker cad link 2 + servo"> 
    </a> 
    <p class = "caption2"> Tinkercad Link to sailboat model </p>
    </div>
</div>

.unique-section {
  display: flex;
  justify-content: space-between;
}

.unique-img1,
.unique-img2 {
  width: 30%;
}

.unique-section img{
  width: 100%:
}

Upvotes: 0

Related Questions